Viv,
I don't know why I can not make it to work on its own (Works Ok in the fiddle except about 1px for the footer line) :( The only change I made in your HTML is this (switch to Google CDN for latest jquery):
<!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>
<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>
<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>
<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="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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>and then I try to open this in the browser, e.g. file:///C:/Temp/ScrollingGrid.html
and I get an error about '$ not defined' :(
What I am doing wrong now?
Thanks again.
>
>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>
If it's not broken, fix it until it is.
My Blog 
