冻结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

固定列最小宽度时出现一些问题，我已经通过使用