align scrollable table columns with header in css - html

Question

JsFiddle URL : http://jsfiddle.net/gfy4pwrr/1
<table cellspacing="0" cellpadding="0" border="0" width="325" >
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<th>Full Name</th>
<th>Status</th>
<th>Last reported</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class ='cont' style="width:325px; height:48px; overflow:auto;">
<table class='data' cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<td>col 1 data 1</td>
<td>col 2 data 1</td>
<td>col 3 data 1</td>
</tr>
<tr>
<td>col 1 data 2</td>
<td>col 2 data 2</td>
<td>col 3 data 2</td>
</tr>
<tr>
<td>col 1 data 3</td>
<td>col 2 data 3</td>
<td>col 3 data 3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
The columns are not aligned with the headers.
I want the table used for data to be aligned with the headers.
td width=100px for second table is not working.

Answer 1

I would get rid of the nested tables and use the semantics of the table element according to the w3c specs. The trick is to use the right elements but manipulate the way the browser displays them. <table>, <thead> and <tbody> can be displayed as block elements while every row can be a table (leaving <td> and <th> displayed as table-cell by default).
I've demonstrated it in a JSFiddle. But it basically comes down to a simple table structure:
<table>
<thead>
<tr>
<th>Full Name</th>
<th>Status</th>
<th>Last reported</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1 data 1</td>
<td>col 2 data 1</td>
<td>col 3 data 1</td>
</tr>
</tbody>
</table>
And setting the display properties in css with an overflow on <tbody>:
table, tbody, thead {
display: block;
}
tbody, thead {
overflow-y: scroll;
}
tbody {
height: 100px;
}
tr {
display: table;
...
}
To come back to the problem with the column width's. There is no other way solving that than setting the same width on each cell in each table (<tr>). In the fiddle I set it to 33.33%:
td , th {
width: 33.33%;
...
}
For Windows it is necessary to show the scrollbar in <thead> otherwise it doesn't size the same as <tbody>. To hide it there is a small trick:
thead {
margin-right: -300px;
padding-right: 300px;
}

Answer 2

It's not that the "columns are not aligned with the headers", the problem is that your second table does NOT have any header. You just have nested tables. One with headers th and second with no header, just td.
Basically your thare not in the same column as your td
So both tables, even if the width is the same, will adjust the width of the cells depending on the content inside. It's just happen all your tdhave same content (in number of charachters) so the effect was that they are slightly missaligned.
However if you set a fixed width to both thand tdand display them as ìnline-block`elements they will align: FIDDLE
However I don't recomend to change the display of the cells on a pure html table. You may have headaches incoming. (and also I don't recomend tthe use of nested tables... I had so many headaches back then when layouts were made that way... ty explorer)

Answer 3

Collapse the borders: border-collapse: collapse; and set box-sizing: border-box;
http://jsfiddle.net/gfy4pwrr/6/
* {
box-sizing: border-box;
}
table {
border-collapse: collapse;
}
td, th {
/* if it is 100px the overflow content in the first column "push" the border ?? */
width: 99px;
max-width: 99px;
overflow: hidden;
}
<table cellspacing="0" cellpadding="0" border="0" width="325">
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="300">
<tr>
<th>Full Name</th>
<th>Status</th>
<th>Last reported</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class='cont' style="width:325px; height:48px; overflow:auto;">
<table class='data' cellspacing="0" cellpadding="1" border="1" width="300">
<tr>
<td>VeryOverflowContent long long long content</td>
<td>OverflowContent</td>
<td>col 3 data 1</td>
</tr>
<tr>
<td>col 1 data 2</td>
<td>col 2 data 2</td>
<td>col 3 data 2</td>
</tr>
<tr>
<td>col 1 data 3</td>
<td>col 2 data 3</td>
<td>col 3 data 3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

Answer 4

I guest you want a fixed header table.I recommend you change your html to easy build a fixed header table.
Here's my suggestion:
<div class="table-header">
<table>
<thead>
<tr>
<th>Full Name</th>
<th>Status</th>
<th>Last reported</th>
</tr>
</thead>
</table>
</div>
<div class="table-content">
<table>
<thead>
<tr>
<th>Full Name</th>
<th>Status</th>
<th>Last reported</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1 data 1</td>
<td>col 2 data 1</td>
<td>col 3 data 1</td>
</tr>
<tr>
<td>col 1 data 2</td>
<td>col 2 data 2</td>
<td>col 3 data 2</td>
</tr>
<tr>
<td>col 1 data 3</td>
<td>col 2 data 3</td>
<td>col 3 data 3</td>
</tr>
</tbody>
</table>
</div>
and css:
.table-header
{ padding-right:13.5px;
}
.table-header table
{
height:20px;
}
.table-header thead tr
{
background:#fff;
z-index:10000;
}
.table-content
{
max-height:250px;
overflow-y:auto;
overflow-x:hidden;
margin-top:-20px;
}
.table-content thead
{
visibility:collapse;
}
table
{
border-collapse: collapse;
}
table th, td
{
border: 1px solid black;
width:200px;
text-align:center;
padding:0;
}
look at:http://jsfiddle.net/chuongxl/gfy4pwrr/51/
or you can use this plugin http://www.fixedheadertable.com/