'$ not defined' sounds as if the Jquery file either wasn't found or was not downloaded when the .resize() function fires.
Also don't know if behaviour may have changed between 1.8 and the latest version.....
>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>
