>>>>>I updated the fiddle and you can see now that the header and footer are not aligned although the columns seem to be aligned regardless on content. In my case I have more columns and all seems to be not aligned properly.
>>>>>
>>>>>
http://jsfiddle.net/5KJka/881/>>>>
>>>>It's because the scroll bar reduces the width of tbody. One possible solution:
http://jsfiddle.net/hashem/CrSpu/555/>>>
>>>Nice, but what about the footer? I tried myself, but I am not good at it
>>>
>>>
http://jsfiddle.net/CrSpu/2729/>>
>>Add the footer in the same way as previously and repeat as for the thead:
$table.find('tfoot tr').children().each(function(i, v) {
>> $(v).width(colWidth[i]);
>> });>
>Ok, after I also did some modifications in the css (same for footer as for the thead) I almost got the correct behavior in that fiddle expect for the fact that now colspan is ignored:
>
>
http://jsfiddle.net/CrSpu/2736/You've got several problems there:
(a) tfoot needs to be display:block
(b) only valid child to tfoot is tr
(c) you can't use collspan - iac you are explicitly setting the width of the element in code. Adding an empty td after the first one would work.
So:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
table.scroll {
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead,
table.scroll tfoot { display: block; }
thead tr th {
height: 30px;
line-height: 30px;
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
border-right: 1px solid black;
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
</style>
</head>
<body>
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<!--Etc.-->
</tbody>
<tfoot>
<tr>
<td>Footer One</td>
<td></td>
<td>Footer Two</td>
<td>Footer Three</td>
</tr>
</tfoot>
</table>
<script src="Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
// Change the selector if needed
var $table = $('table.scroll'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Adjust the width of thead cells when window resizes
$(window).resize(function () {
// Get the tbody columns width array
colWidth = $bodyCells.map(function () {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function (i, v) {
$(v).width(colWidth[i]);
});
$table.find('tfoot tr').children().each(function (i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler
</script>
</body>
</html>
