freeze first column of html table

Question

I would like to freeze the first column of my html table. after a few attempts i manage to freeze it but somehow when i scroll the table horizontally the columns at the left seems like overlapped with the first column. i couldn't find a way to fix it. can you please help? you can use this codepen to test it out.

CSS:

table { width: 100%; position: relative; overflow: hidden; display: block; } thead { width: 100%; display: block; position: relative; overflow: visible; } thead th:nth-child(1) { position: relative; display: block; min-width:200px; } tbody { width: 100%; position: relative; display: block; max-height: 307px; overflow: scroll; } tbody tr td:nth-child(1) { position: relative; display: block; min-width:200px; } table th, table td { min-width: 150px; max-width: 150px; padding: 2px 3px; text-align: left; text-overflow: ellipsis; border: 1px solid #e1e1e1; }

JS:

$(document).ready(function() { $('tbody').scroll(function(e) { $('thead').css("left", -$("tbody").scrollLeft()); $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); }); });

the original of the css and js code above are come from stackoverflow.com/questions/45071085/… — user466130
– user466130, Commented Jul 30, 2018 at 14:01
Possible duplicate of how do I create an HTML table with fixed/frozen left column and scrollable body? — Feras Al Sous
– Feras Al Sous, Commented Jul 30, 2018 at 14:01

Chaska · Accepted Answer · 2018-07-30 14:03:58Z

3

Simply set the background-color for first column?

table th:first-child, table td:first-child { background-color: #fff; }

answered Jul 30, 2018 at 14:03

Chaska

3,2151 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user466130 Over a year ago

it somehow fix my problem :)

user466130 Over a year ago

sorry for stupid question, does the js above has dependency on the jquery? i try to remove jquery and it doesn't behave correctly.

user466130 Over a year ago

somehow it didn't work as expected in my dash-plotly apps. community.plot.ly/t/freeze-first-column-in-html-table/12230

HoangHieu · Accepted Answer · 2018-07-30 14:11:41Z

0

There some problem when you fixed column min-width I have fixed that by using

answered Jul 30, 2018 at 14:11

HoangHieu

2,8403 gold badges32 silver badges46 bronze badges

Collectives™ on Stack Overflow

freeze first column of html table

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related