HTML CSS examples for CSS Widget:Table Height
Set Table Body a max height and make it vertically scrollable
<html lang="en"> <head> <title>Lorem ipsum dolor sit amet, </title> <style> .fixed_headers {<!--from ww w. ja va 2s . c o m--> width:751px; table-layout:fixed; border-collapse:collapse; } .fixed_headers th { text-decoration:underline; } .fixed_headers th, .fixed_headers td { padding:6px; text-align:left; } .fixed_headers td:nth-child(1), .fixed_headers th:nth-child(1) { min-width:201px; } .fixed_headers td:nth-child(2), .fixed_headers th:nth-child(2) { min-width:201px; } .fixed_headers td:nth-child(3), .fixed_headers th:nth-child(3) { width:351px; } .fixed_headers thead { background-color:Chartreuse; color:yellow; } .fixed_headers thead tr { display:block; position:relative; } .fixed_headers tbody { display:block; overflow:auto; width:100%; height:301px; } .fixed_headers tbody tr:nth-child(even) { background-color:blue; } .old_ie_wrapper { height:301px; width:751px; overflow-x:hidden; overflow-y:auto; } .old_ie_wrapper tbody { height:auto; } </style> </head> <body translate="no"> <!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. --> <!--[if lte IE 9]> <div class="old_ie_wrapper"> <!--<<![endif]--> <table class="fixed_headers"> <thead> <tr> <th>Lore</th> <th>Lorem</th> <th>Lorem ipsum</th> </tr> </thead> <tbody> <tr> <td>Lorem</td> <td>Lor</td> <td>Lorem ipsum do</td> </tr> <tr> <td>Lore</td> <td>Lorem</td> <td>Lorem ipsum dolo</td> </tr> <tr> <td>Lorem</td> <td>Lorem ipsum do</td> <td>Lorem ipsum dolor sit amet,</td> </tr> <tr> <td>Lorem </td> <td>Lorem </td> <td>Lorem ipsum dolor</td> </tr> <tr> <td>Lorem </td> <td>Lorem </td> <td>Lorem ipsum dolor</td> </tr> <tr> <td>Lore</td> <td>Lorem</td> <td>Lorem ipsum dolo</td> </tr> <tr> <td>Lore</td> <td>Lorem </td> <td>Lorem ipsum dolo</td> </tr> <tr> <td>Lorem ipsu</td> <td>Lor</td> <td>Lorem ipsum do</td> </tr> <tr> <td>Lorem </td> <td>Lor</td> <td>Lorem ipsum do</td> </tr> <tr> <td>Lorem </td> <td>Lor</td> <td>Lorem ipsum do</td> </tr> <tr> <td>Lorem ips</td> <td>Lorem </td> <td>Lorem ipsum dolor sit am</td> </tr> <tr> <td>Lorem ip</td> <td>Lorem</td> <td>Lorem ipsum dolor sit a</td> </tr> <tr> <td>Lorem </td> <td>Lorem</td> <td>Lorem ipsum dolo</td> </tr> <tr> <td>Lorem ips</td> <td>Lor</td> <td>Lorem ipsum do</td> </tr> <tr> <td>Lorem ips</td> <td>Lore</td> <td>Lorem ipsum dol</td> </tr> <tr> <td>Lorem</td> <td>Lorem </td> <td>Lorem ipsum dolor</td> </tr> <tr> <td>Lorem ipsum d</td> <td>Lorem</td> <td>Lorem ipsum dolo</td> </tr> </tbody> </table> <!--[if lte IE 9]> </div> <!--<<![endif]--> </body> </html>