A Sticky position Horizontal & Vertical Table Row & Column With CSS when show scroll on your data-table. Freeze/sticky The First Two Rows and Left Columns On Vertical & Horizontal Scrolling In Table. its help for display your data with title information.
Table of Contents
How to use it :
1. Add Simple Html Table Tag:
<div class="table-box">
<table>
<tr>
<th>Contact1</th>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr>
<tr>
<th>Country2</th>
<td>Centro </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
<tr>
<th>Company3</th>
<td>Ernst </td>
<td>Roland </td>
<td>Austria</td>
</tr>
<tr>
<th>Company4</th>
<td>Island </td>
<td>Helen </td>
<td>UK</td>
</tr>
<tr>
<th>Company5</th>
<td>Laughing </td>
<td>Yoshi </td>
<td>Canada</td>
</tr>
<tr>
<th>Company6</th>
<td>Magazzini </td>
<td>Giovanni </td>
<td>Italy</td>
</tr>
</table>
2. Add Simple Css:
.table-box {
overflow: scroll;
height: 150px;
width: 400px;
}
table {width: 100%;}
table th {min-width: 150px; padding: 7px;background-color: #ddd;}
table td {min-width: 150px;}
table tr th{position: sticky;left: 0;}
table tr:nth-child(1) th,table tr:nth-child(2) th{z-index: 1;}
table tr:nth-child(1) th,table tr:nth-child(1) td {top:0px;position: sticky;}
table tr:nth-child(1) td {background-color: #eee;}
table tr:nth-child(2) th,table tr:nth-child(2) td{top:34px;position: sticky;}
table tr:nth-child(2) td {background-color: #eee;}
3. Sticky css for vertical & horizontal :
// For Horizontal Sticky CSS
table tr:nth-child(1) th {top:0px;position: sticky;}
// For Vertical CSS
th,table tr:nth-child(1) td {top: 0px;position: sticky;}
