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

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

解决了该问题