><!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>>
<!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>