HTML CSS examples for CSS Widget:Table Scroll
Scroll table sticky thead
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> </style> <!-- w w w. j av a 2s . c o m--> </head> <body> <table class="table table-hover table-striped"> <thead> <tr> <th>Lore</th> <th>Lorem </th> <th></th> </tr> </thead> <tbody id="user-rows"> <tr> <td> <div style="overflow:auto; height:10em; width:20em;"> <table> <tbody> <tr class="user-row" style="opacity: 1;"> <td>Lorem </td> <td>Lorem ipsum d</td> <td> <span class="btn btn-mini btn-primary edit pull-right fade">Lore</span> </td> </tr> <tr class="user-row" style="opacity: 1;"> <td>Lorem </td> <td>Lorem ipsum d</td> <td> <span class="btn btn-mini btn-primary edit pull-right fade">Lore</span> </td> </tr> <tr class="user-row" style="opacity: 1;"> <td>Lorem </td> <td>Lorem ipsum d</td> <td> <span class="btn btn-mini btn-primary edit pull-right fade">Lore</span> </td> </tr> <tr class="user-row" style="opacity: 1;"> <td>Lorem </td> <td>Lorem ipsum d</td> <td> <span class="btn btn-mini btn-primary edit pull-right fade">Lore</span> </td> </tr> <tr class="user-row" style="opacity: 1;"> <td>Lorem </td> <td>Lorem ipsum d</td> <td> <span class="btn btn-mini btn-primary edit pull-right fade">Lore</span> </td> </tr> <tr class="user-row" style="opacity: 1;"> <td>Lorem </td> <td>Lorem ipsum d</td> <td> <span class="btn btn-mini btn-primary edit pull-right fade">Lore</span> </td> </tr> <tr class="user-row" style="opacity: 1;"> <td>Lorem ips</td> <td>Lorem ipsum d</td> <td> <span class="btn btn-mini btn-primary edit pull-right fade">Lore</span> </td> </tr> <tr class="user-row" style="opacity: 1;"> <td>Lorem</td> <td>Lorem ip</td> <td> <span class="btn btn-mini btn-primary edit pull-right fade">Lore</span> </td> </tr> <tr class="user-row" style="opacity: 1;"> <td>Lorem </td> <td>Lorem ipsum d</td> <td> <span class="btn btn-mini btn-primary edit pull-right fade">Lore</span> </td> </tr> <tr class="user-row" style="opacity: 1;"> <td>Lorem</td> <td>Lorem ipsum d</td> <td> <span class="btn btn-mini btn-primary edit pull-right fade">Lore</span> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </body> </html>