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>
Related
How to select the th element of table without selecting it's child th? is it possible? is there any selector like so?
here is the demo:
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
thead:first-of-type th {
background-color: gray;
}
<table>
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
When i add the gray background it added with tables child elements of the too. is there any direct selector to only select the parent level th element?
Thanks in advance.
You need to add one class to the main table. Try this code
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
.parent-table>thead:first-of-type th {
background-color: gray;
}
<table class="parent-table">
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
You can try this:
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
table > thead:first-of-type > tr > th {
background-color: gray;
}
table > tbody > tr td table > thead:first-of-type > tr > th{
background-color: white;
}
<table>
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
I built a table in HTML:
But the problem is that I could not center the table to the center of the screen, and I could not arrange it in such a way that the columns would be without indentations, and one below the other (i.e. 'aaaaa' would be below 'Name', 'bbbbb' would be below 'address' and 'ccccc' would be below 'phone').
Do you have any idea how to center the table and how to align the columns so that they will be without indentations? Thanks in advance!
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</div>
</tbody>
</table>
This is a simple exercise in CSS- use margin: 0 auto to center it horizontally.
You could also do this with flex or other stylnig to suit as well. I added some borders and spacing for the ths and tds to demonstrate the alignment.
You can also style the content of the th's and the td's to give specific styling for each - eg- have the th a different font-size and color than the td's - but still have them left-aligned.
EDIT - I have just noticed that you have divs inside the table - this is invalid - the only valid child of a tbody - is a tr element. I have removed them from the code in my solution - sorry I didn't see that vbefore - dangers of copy / paste.
table {
border: solid 1px #e1e1e1;
border-collapse: collapse;
margin: 0 auto;
}
th, td{
border: solid 1px #e1e1e1;
padding: 4px 8px
}
th {
font-size: 12px;
color: #b9b9b9;
text-align: left
}
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td >aaaaa aaaaa </td>
<td >bbbbb bbbbb</td>
<td >ccccc ccccc</td>
</tr>
</tbody>
</table>
https://www.w3schools.com/howto/howto_css_table_center.asp
Add class="center" to the table html tag
<table class="center" id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</div>
</tbody>
</table>
and add some CSS, such as
.center {
margin-left: auto;
margin-right: auto;
}
or (even simpler):
.center {
margin: 0 auto;
}
table{
margin:0 auto;
}
th,td{
text-align:left;
}
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >a</td>
<td >b</td>
<td >c</td>
</tr>
</div>
</tbody>
</table>
Please amend you codes to something similar to :
.div1{
width:100%;
}
table, th, td {
border: 1px solid black;
}
.table1{
margin: 0 auto;
}
<div class=div1>
<table class=table1>
<tr>
<td>Name</td>
<td>Adress</td>
<td>Phone</td>
</tr>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</table>
</div>
i am working on table structure html and i want to set my design in my stucture!!
i have get issue my table format width is set according to body content !
My question is how can i set width accrding to header ?
here is my code.
<table>
<thead>
<tr>
<td>Document name</td>
<td>Category</td>
<td>Sub category</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>Indisoft – RX Office and Thinagee- 401K Payment </td>
<td>admin</td>
<td>admin-sub</td>
<td>published</td>
</tr>
</tbody>
</table>
You can see my output:
enter image description here
Set the style on any of the td or th tags in the thead, and it will apply to all the cells in the column.
In the example below I've used an inline style, but that is not necessary. You could use CSS classes for that as well.
Also, you should replace the td's in the thead with th elements.
table td {
border: 1px black solid;
}
<table>
<thead>
<tr>
<td style="width: 50px">Document name</td>
<td>Category</td>
<td>Sub category</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>Indisoft – RX Office and Thinagee- 401K Payment </td>
<td>admin</td>
<td>admin-sub</td>
<td>published</td>
</tr>
</tbody>
You should set style width for each column, in other case it will resize to body size.
For example:
table {
border: solid 1px #000;
}
table td:nth-child(1) {
width: 200px;
border-right: solid 1px #ccc;
}
table td:nth-child(2) {
width: 100px;
border-right: solid 1px #ccc;
}
table td:nth-child(3) {
width: 150px;
border-right: solid 1px #ccc;
}
table td:nth-child(2) {
width: 50px;
}
<table>
<thead>
<tr>
<td>Document name</td>
<td>Category</td>
<td>Sub category</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>Indisoft – RX Office and Thinagee- 401K Payment </td>
<td>admin</td>
<td>admin-sub</td>
<td>published</td>
</tr>
</tbody>
I want to create a table with only partly separated borders. The borders above and below the thead should be without spaces in between. But others in it should be separated by a small space.
Unfortunately, the border-spacing style only applies to the whole table: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
For example, in the following I want to have space only between the border-top of h2.1 and h2.2. Is that possible?
HTML:
<table>
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: separate;
}
th,
td {
vertical-align: top;
}
thead tr:first-child th {
border-top: 2px solid;
}
thead tr:not(:first-child) th {
border-top: 1px solid;
}
tbody tr:first-child td {
border-top: 1px solid;
}
tbody tr {
border-top: 1px solid;
}
Fiddle: https://jsfiddle.net/6ov4hadd/
Edit
Here is a more sensible example.
Fiddle: https://jsfiddle.net/Lnk929q4/
I want to look it like a "book table":
You can try using two different tables for head part and body part. Something like this
https://jsfiddle.net/6ov4hadd/1/
<table id = "table1">
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
I'm trying to apply a border to all tr's in a thead.
Css(stylus):
table
thead
tr
border: solid #000;
border-width: 0 10px;
According to chrome the styles get applied, but the border doesn't actually show up:
tr need its table to have border-collapse: collapse for border to work
table.first {
border-collapse: separate; /* property default */
}
table.second {
border-collapse: collapse;
}
table thead tr {
border-bottom: 2px solid gray;
}
/* for this demo only */
div {
margin: 25px 20px 10px;
text-decoration: underline;
}
<div>This table's tr (in thead) has no border</div>
<table class="first">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>
<div>This table's tr (in thead) has border</div>
<table class="second">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
i'm not a css master but i usually write border properties in one line:
border: 10px solid #000;