Fixed Header TH Table Using Pure Css and Html

Fixied Header Table
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.


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>

0 comments: