HTML CSS examples for CSS Widget:Table Column
Table with scrollable body and colgroup
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .table-container { height:11em; } table {<!-- ww w . j a va 2 s. co m--> display:flex; flex-flow:column; height:100%; width:100%; } table thead { flex:0 0 auto; width:calc(100% - 0.10em); } table tbody { flex:2 2 auto; display:block; overflow-y:scroll; } table tbody tr { width:100%; } table thead, table tbody tr { display:table; table-layout:fixed; } .table-container { border:2px solid Chartreuse; padding:0.4em; } table { border:2px solid yellow; } table td, table th { padding:0.4em; border:2px solid blue; } table th { border:2px solid pink; } col { display:inline-block; height:21px; background:OrangeRed; } </style> </head> <body> <div class="table-container"> <table> <colgroup> <col span="1" style="width: 15%;"> <col span="1" style="width: 40%;"> <col span="1" style="width: 20%;"> <col span="1" style="width: 25%;"> </colgroup> <thead> <tr> <th>Lorem</th> <th>Lorem</th> <th>Lorem</th> <th>Lorem</th> </tr> </thead> <tbody> <tr> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> </tr> <tr> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> </tr> <tr> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> </tr> <tr> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> </tr> <tr> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> </tr> <tr> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> <td>Lorem ip</td> </tr> </tbody> </table> </div> </body> </html>