javascript - 当将 "tr"位置设置为固定时，称为 "td"宽度的子元素发生变化

Question

我有一个表格，我想让第一行“自动固定”(这意味着当向下滚动时它固定在顶部，而如果不向下滚动，它就不固定)。这是代码:```

<style type="text/css">
table {
    background: yellow;
}
td {
    width: 50px;
}
</style>
<table border="1">
    <tr class="auto-header">
        <th>123</th>
        <th>123</th>
        <th>123</th>
        <th>123</th>
    </tr>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
    ... # many rows
</table>

<script type="text/javascript">
$(document).ready(function() {
    $(".auto-header").each(function() {
      var $this = $(this),
        top = $this.offset().top,
        left = $this.offset().left,
        width = $this.width(),
      height = $this.height;
      console.log(width);
    $(window).scroll(function() {
      if($(window).scrollTop() >= top) {
        $this.css({
          position: "fixed",
          top: 0,
          left: left,
          "z-index": 100,
          width: width,
          height: height
        });
      } else {
        // to be implemented
      }
    });
  });
});
</script>

当我向下滚动时，第一行固定在顶部，但看起来它的宽度发生了变化。我使用 Chrome 元素检查器并发现 tr 的宽度与其他行相同，但每个 th 的宽度都发生了变化。有没有办法让子元素(这里是那些 th)的宽度和高度不变？

Answer 1

我会使用像这样的 jQuery 插件 - https://github.com/markmalek/Fixed-Header-Table