html - How to make a table scrollable with fixed header? -
i have table gets added dynamically webpage.
table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: center; } table#appraisertable th { background-color: black; color: white; }
i want make scrollable header fixed.
i can make whole table scrollable adding code in css-
tbody { display:block; overflow-y:scroll; height:100px; }
but makes whole table scrollable; header doesn't stay fixed. also, table has border, how can rid of it?
here go jsfiddle
<body> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th>month</th> <th>savings</th> </tr> </thead> </table> <div class="tb"> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td>01</td> <td>$100</td> </tr> <tr> <td>02</td> <td>$80</td> </tr> <tr> <td>03</td> <td>$100</td> </tr> <tr> <td>04</td> <td>$80</td> </tr> <tr> <td>05</td> <td>$100</td> </tr> <tr> <td>06</td> <td>$80</td> </tr> </tbody> </table> </div> </body>
css
table, th, td { border-collapse: collapse; } th, td { padding: 5px; text-align: center; } table#appraisertable th { background-color: black; color: white; } .tb { height: 100px !important; overflow: auto; }
Comments
Post a Comment