How to make a table scrollable with fixed header?

Question

I have a table that gets added dynamically to my 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 to make it scrollable with the header fixed.

I can make the whole table scrollable by adding this code in CSS-

tbody {
    display:block;
    overflow-y:scroll; 
    height:100px;    
}

But this makes the whole table scrollable; the header doesn't stay fixed. Also, the table has a border, how can I get rid of it?

possible duplicate of [CSS-Only Scrollable Table with fixed headers](http://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers) — klaar, Aug 03 '15 at 06:57
You can see it at: [CSS-Only Scrollable Table with fixed headers](http://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers) — Pham Minh Tan, Aug 03 '15 at 06:58
Do not include tags in the question title. The tags are visible everywhere you view the question. And, the question has nothing to do with Javascript. — Purag, Aug 05 '15 at 00:44

Faisal · Accepted Answer · 2015-08-03T07:24:12.270

Here you 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;
}

How to make a table scrollable with fixed header?

1 Answers1