凍結html表的第一列

Question

我想凍結html表的第一列。 經過幾次嘗試后，我設法凍結了它，但是以某種方式當我水平滾動表時，左側的列似乎與第一列重疊。 我找不到解決它的方法。 你能幫忙嗎？ 您可以使用該Codepen進行測試。

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

Answer 1

只需為第一列設置background-color ？

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

Answer 2

固定列最小寬度時出現一些問題，我已經通過使用