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.

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