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

Popular posts from this blog

python - Healpy: From Data to Healpix map -

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -