Fixed Header TH Table Using Pure Css and Html

How to fixed the table Header TH on top when you scroll the mouse. Here you can get the code for the fixed header for the table below. In this code not use any JS only using CSS and Html only. Copy the Css and Html code and use it.

Click Here for Demo

CSS:

.table-container {
    position: relative;
    padding-top: 37px;
    background: #12912B;
}
.inner-container {
    overflow-y: auto;
    height: 200px;
}
table {
    border-spacing: 0;
    width: 100%}
td, th {
    background: #F9F9F9;
    color: #000;
    padding: 10px 25px;
    border-top: 1px solid #dddddd;
}
th {
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
}
th div {
    position: absolute;
    background: transparent;
    color: #ffffff;
    padding: 9px 25px;
    top: 0;
    margin-left: -25px;
    line-height: normal;
}
th:first-child div {
    border: none;
}

HTML:

<div class="table-container">
<div class="inner-container">
<table>
<thead>
<tr>
<th><div>Header 1</div></th>
<th><div>Header 2</div></th>
<th><div>Header 3</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Simple Fixied Header Table Row 1</td>
<td>Simple Fixied Header Table Row 2</td>
<td>Simple Fixied Header Table Row 3</td>
</tr>
<tr>
<td>Simple Fixied Header Table Row 1</td>
<td>Simple Fixied Header Table Row 2</td>
<td>Simple Fixied Header Table Row 3</td>
</tr>
<tr>
<td>Simple Fixied Header Table Row 1</td>
<td>Simple Fixied Header Table Row 2</td>
<td>Simple Fixied Header Table Row 3</td>
</tr>
<tr>
<td>Simple Fixied Header Table Row 1</td>
<td>Simple Fixied Header Table Row 2</td>
<td>Simple Fixied Header Table Row 3</td>
</tr>
</tbody>
</table>
</div>
</div>

Share on Facebook Share on Twitter