can you please tell me how to add border on row using table ?
here is my code
.table_view_el {
border: 1px solid
}
.table_view_el tr {
border: 1px solid
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
<tbody>
<tr style="
/* outline: 1px solid; */
border-bottom: 1px solid red;
/* border-bottom: 1pt solid black; */
">
<th>Party</th>
<th>Lead Seats</th>
<th>Win Seats</th>
<th>Total Seats</th>
</tr>
<tr style="
/* border-bottom: 1px solid black; */
padding: -1px;
">
<td>INC</td>
<td>0</td>
<td>120</td>
<td>120</td>
</tr>
<tr>
<td>BJP</td>
<td>0</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>JD(S)</td>
<td>0</td>
<td>37</td>
<td>37</td>
</tr>
<tr>
<td>OTH</td>
<td>0</td>
<td>15</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>
https://jsbin.com/hosogiyaji/edit?html,css,output
I usually apply two borders to the table and then the 2 opposite borders to the cells:
.table_view_el {
border-right: 1px solid;
border-bottom: 1px solid;
}
.table_view_el th,
.table_view_el td {
border-top: 1px solid;
border-left: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
<tbody>
<tr style="
">
<th>Party</th>
<th>Lead Seats</th>
<th>Win Seats</th>
<th>Total Seats</th>
</tr>
<tr style="
">
<td>INC</td>
<td>0</td>
<td>120</td>
<td>120</td>
</tr>
<tr>
<td>BJP</td>
<td>0</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>JD(S)</td>
<td>0</td>
<td>37</td>
<td>37</td>
</tr>
<tr>
<td>OTH</td>
<td>0</td>
<td>15</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>
If you just want rows only, move left border from the cells to the table
i think so we can apply border on td so You can use this code for solution.
td {
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
You can add the following border-collapse rule on your table to get the row borders to show:
table {
border-collapse: collapse;
}
.table_view_el {
border: 1px solid
}
.table_view_el tr {
border: 1px solid
}
table {
border-collapse: collapse;
}
<table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
<tbody>
<tr style="border-bottom: 1px solid red;">
<th>Party</th>
<th>Lead Seats</th>
<th>Win Seats</th>
<th>Total Seats</th>
</tr>
<tr style="padding: -1px;">
<td>INC</td>
<td>0</td>
<td>120</td>
<td>120</td>
</tr>
<tr>
<td>BJP</td>
<td>0</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>JD(S)</td>
<td>0</td>
<td>37</td>
<td>37</td>
</tr>
<tr>
<td>OTH</td>
<td>0</td>
<td>15</td>
<td>15</td>
</tr>
</tbody>
</table>
It seems to me that <tr>cannot be styled directly so what you can do is add a border bottom to the <td>.
tr td {
border-bottom: 1px solid black;
}
tr:last-child td {
border-bottom: 0;
}
Related
I want to add borders to each of the sections in the table (Which means two borders separating the two sections. Assuming this table has headers already):
<table>
<section class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</section>
<section class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</section>
</table>
I was attempting with the following CSS code, but the border-bottom does not appear
section[class="physicists"] {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
}
Can anyone tell me what the issue is?
Use <tbody> instead of <section>
As others noted in the comments, <table> cannot contain <section> as its valid child element. Instead, <tbody> element is meant for this exact purpose.
1. An example with <th> as section heading
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
background-color: #f0f0f0;
}
tbody > tr > th {
background: #c6c8d2;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr>
<th colspan="3">Physicists</th>
</tr>
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr>
<th colspan="3">Martial Artists</th>
</tr>
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
2. An example without section heading
table {
border-collapse: collapse;
}
td {
padding: 5px;
background-color: #f0f0f0;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
Apply border-collapse: collapse; to the parent table
When cells are separated, the distance between cells is defined by the border-spacing property.
border-collapse determines how the table cells would handle their borders. If not set, it's separate by default. For details, see this MDN page.
First bug:
At first, <section> element can't be used that way.
The table can be embedded in the section but not the other way around.
Split it to two tables like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<table class="physicists my-frame">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</table>
<table class="martial-artists my-frame">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</table>
<style>
.my-frame {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
width:100%;
margin-top:5px;
}
.my-frame td{
width:33%;
}
</style>
</body>
</html>
Second info:
This is not the best way to write selectors:
section[class="physicists"]{ /* ... */ }
Better is:
section.physicists{ /* ... */ }
have a question. How to set the column layout so that the writing is parallel to the top, here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 10%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland Netherland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
I want a layout like the following, I want the second column text aligned with the first column:
make a vertical-align: top rule for th
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
td{
vertical-align: top;
}
table {
border-collapse: collapse;
width: 10%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland Netherland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
You should target the 2nd child and set vertical align to top
table tr td:nth-child(2) {
vertical-align: top
}
Live example
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 10%;
}
th {
text-align: left;
}
table tr td:nth-child(2) {
vertical-align: top
}
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland Netherland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Reference
:nth-child()
vertical-align
I have a basic table and would like to show the first 3 rows under the header, then provide a scroll wheel to display the remaining 2 rows.
I have tried setting the height of the table and using overflow: scroll in various places but cannot get to work. I wasn't sure if this property could even be used on tables or if it was just for divs.
My code is below, many thanks in advance for any help.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</body>
You have to put the table inside a div and then set the height of the div to be smaller than the height of your table and overflow-y: scroll.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
.table-wrap {
height: 222px;
overflow-y: scroll;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</div>
</body>
table {
border-collapse: collapse;
max-height: 50px;
overflow: auto;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
HTML table border is not working after exporting the excel sheet. It is coming as no border excel sheet.The result after generate the excel is,
But my expected result is,
I want to split it into two different sections. But it is not working in excel sheet.
JSFIDDLE
$("[id$=myButtonControlID]").click(function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=divTableDataHolder]').html()));
e.preventDefault();
});
table {
border: 1px solid black;
}
th {
border: 1px solid black;
padding: 5px;
background-color: skyblue;
color: white;
}
td {
border: 1px solid black;
padding: 5px;
color: green;
}
<button id="myButtonControlID">Export Table data into Excel</button>
<div id="divTableDataHolder">
<table>
<tr>
<th>ColumnOne </th>
<th>ColumnTwo</th>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
</table>
</div>
$("[id$=myButtonControlID]").click(function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('div[id$=divTableDataHolder]').html()));
e.preventDefault();
});
table
{
border: 1px solid black;
}
th
{
border: 1px solid black;
padding: 5px;
background-color:skyblue;
color: white;
}
td
{
border: 1px solid black;
padding: 5px;
color: green;
}
<button id="myButtonControlID">Export Table data into Excel</button>
<div id="divTableDataHolder">
<table border="1">
<tr><th>ColumnOne </th><th>ColumnTwo</th></tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
</table>
</div>
I didn't test this could you please try this
is it worked.
i modifiy this
$("[id$=myButtonControlID]").click(function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('div[id$=divTableDataHolder]').html()));
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<button id="myButtonControlID">Export Table data into Excel</button>
<div id="divTableDataHolder">
<table border="1" style="border-collapse: collapse;">
<tr><th>ColumnOne </th><th>ColumnTwo</th></tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
</table>
</div>
Why doesn't the border show around tbody in the following? I tried rules="groups" and the border appears, but only between the two tbody sections and it is collapsed.
table.sectioned tbody {
border: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
<table class="sectioned">
<tbody>
<tr><td colspan="2"><b>General Data</b></td></tr>
<tr><td>Tail Number</td><td>N0809021</td></tr>
<tr><td>Type of Ownership</td><td>personal</td></tr>
<tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr>
<tr><td>Year of Manufacture</td><td>1999</td></tr>
<tr><td>Use of Aircraft</td><td>private</td></tr>
<tr><td>Start Date</td><td></td></tr>
<tr><td>Policy Length</td><td>6 months</td></tr>
</tbody>
<tbody>
<tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr>
<tr><td>Manufacturer</td><td></td></tr>
<tr><td>Model</td><td></td></tr>
<tr><td>Engine Make</td><td></td></tr>
<tr><td>Number of Seats</td><td></td></tr>
</tbody>
</table>
Add:
table {border-collapse: collapse;}
FIDDLE
Add display:block to your tbody style. Try this
tbody{
display:block;
border: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
You can test it out on this fiddle
Use box-shadow instead of border. It works no matter which value of border-collapse was applied. In addition, you can also apply border-radius to it.
tbody {
box-shadow: 0 0 0 1px black;
border-radius: 5px;
}
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</tbody>
</table>
.table_body, .tbody_td, .tbody_th
{ border: 1px solid black; }
.table_body { border-collapse: collapse; }
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<td class="tbody_td">Jill</td>
<td class="tbody_td">Smith</td>
</tr>
<tr>
<td class="tbody_td">Eve</td>
<td class="tbody_td">Jackson</td>
</tr>
</tbody>
</table>