HTML CSS examples for CSS Widget:Table Scroll
Enable Table scroll
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #myTableB {<!-- w w w. j a va 2s . com--> height:5em; overflow-y:scroll } h1 { font-size:181% } h2 { font-size:141% } #myTable tbody { height:5em; overflow-y:scroll } </style> </head> <body> <h1>Lorem ipsum dolor sit amet, consectetu</h1> <h2>Lorem ipsum dolor </h2>Lorem ipsum dolor sit amet, consectetur adipisci <table id="myTableH" border="1" width="360"> <thead> <tr> <th width="15%">Lorem ips</th> <th width="15%">Lorem ipsu</th> <th>Lorem</th> <th width="15%">Lor</th> </tr> </thead> </table> <div id="myTableB"> <table border="1" width="360"> <thead> </thead> <tbody> <tr> <td width="15%">Lorem</td> <td width="15%">Lore</td> <td>Lorem ipsum dolo</td> <td width="15%">Lorem </td> </tr> <tr> <td>Lore</td> <td>Lorem</td> <td>Lorem ipsum dol</td> <td>Lorem </td> </tr> <tr> <td>Lor</td> <td>Lorem</td> <td>Lorem ipsum dolo</td> <td>Lorem i</td> </tr> <tr> <td>Lorem </td> <td>Lor</td> <td>Lorem ipsum dolor sit</td> <td>Lorem </td> </tr> <tr> <td>Lorem</td> <td>Lore</td> <td>Lorem ipsum dolor </td> <td>Lorem </td> </tr> </tbody> </table> </div> <!-- ########## --> <hr> <h2>Lorem ipsum dolor sit</h2>Lorem ipsum dol <table id="myTable" border="1" width="360"> <thead> <tr> <th width="15%">Lorem ips</th> <th width="15%">Lorem ipsu</th> <th>Lorem</th> <th width="15%">Lor</th> </tr> </thead> <tbody> <tr> <td width="15%">Lorem</td> <td width="15%">Lore</td> <td>Lorem ipsum dolo</td> <td width="15%">Lorem </td> </tr> <tr> <td>Lore</td> <td>Lorem</td> <td>Lorem ipsum dol</td> <td>Lorem </td> </tr> <tr> <td>Lor</td> <td>Lorem</td> <td>Lorem ipsum dolo</td> <td>Lorem i</td> </tr> <tr> <td>Lorem </td> <td>Lor</td> <td>Lorem ipsum dolor sit</td> <td>Lorem </td> </tr> <tr> <td>Lorem</td> <td>Lore</td> <td>Lorem ipsum dolor </td> <td>Lorem </td> </tr> </tbody> </table> </body> </html>