javascript - 具有固定标题的表上的奇怪边框行为

Question

我遇到了最奇怪的事情。我正在使用一个简单的 jquery 脚本来使 thead 在 tbody 滚动时保持原位。它工作得很好，除了一些奇怪的边框行为。查看 Pen，您可以在每个 th 的底部看到红色边框。我试过将它放在 thead 和 thead 的 tr 上，但它的行为始终相同。它消失在……它自己的下面？我什至不确定。

http://codepen.io/sinrise/pen/NrxgWG

我正在使用 Bootstrap 和 SCSS。

我现在的解决方案是在 ths 中添加一个 :before ，它只是一个 abs pos 框，我想要的边框宽度的高度。它工作正常，但如果可能的话，我真的很想使用实际的边框。谢谢!

HTML

<div class="container">
  <div class="table-fixedheader" style="height: 200px; overflow-y: auto;">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>One</th>
          <th>Two</th>
          <th>Three</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" value="#1" /></td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#2</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#3</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#4</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#5</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#6</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#7</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#8</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.container { padding: 30px; }

.table-fixedheader table thead tr th {
  border-bottom: 5px solid red;
  position: relative;
}

.table-fixedheader thead {
  background-color: #cccccc;
}

JQ

$(".table-fixedheader").scroll(function() {
  $(this).find("thead").css("transform", "translate(0," + this.scrollTop + "px)");
});

Answer 1

这是因为翻译属性。尝试使用 position 属性修复 thead。这是您的答案代码笔:

 $(".table-fixedheader").scroll(function() {
$(this).find("thead").css({'position':'absolute', 'width': $('.table').width() });      
    });

http://codepen.io/SESN/pen/BzKepx