Sticky Table Horizontal & Vertical Row & Column With Css

Html & CSS
File Size: 0.82 KB
Views Total: 5349 views
Last Update:February 21, 2021
Publish Date: December 10, 2019
Official Website: Go to website
License: MIT
Plugin Author: madroid
Demo    Download

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">
    <td>Alfreds </td>
    <td>Maria </td>
    <td>Centro </td>
    <td>Francisco </td>
    <td>Ernst </td>
    <td>Roland </td>
    <td>Island </td>
    <td>Helen </td>
    <td>Laughing </td>
    <td>Yoshi </td>
    <td>Magazzini  </td>
    <td>Giovanni </td>

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 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.