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 https://stackoverflow.com/questions/45071085/freeze-first-row-and-first-column-of-table — user466130, Jul 30 '18 at 14:01
Possible duplicate of [how do I create an HTML table with fixed/frozen left column and scrollable body?](https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body) — Feras Al Sous, Jul 30 '18 at 14:01

score 3 · Answer 1 · answered Jul 30 '18 at 14:03

3

Simply set the background-color for first column?

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

answered Jul 30 '18 at 14:03

Chaska

3,165
1
11
17

it somehow fix my problem :) – user466130 Jul 30 '18 at 14:06
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 Jul 30 '18 at 15:14
somehow it didn't work as expected in my dash-plotly apps. https://community.plot.ly/t/freeze-first-column-in-html-table/12230 – user466130 Jul 31 '18 at 03:45

score 0 · Answer 2 · answered Jul 30 '18 at 14:11

0

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

answered Jul 30 '18 at 14:11

HoangHieu

2,802
3
28
44

freeze first column of html table

2 Answers2