Sticky Table Horizontal & Vertical Row & Column With Css

Html & CSS
Demo    Download
Sticky-Horizontal-Vertical-Table-Row-Column-With-Css
File Size: 0.82 KB
Views Total: 3409 views
Last Update:February 21, 2021
Publish Date: December 10, 2019
Official Website: Go to website
License: MIT
Plugin Author: madroid

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


Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.