具有固定标题的表格上的奇怪边框行为答案

【问题标题】：Bizarre border behavior on tables with a fixed header具有固定标题的表格上的奇怪边框行为
【发布时间】：2016-06-14 18:23:59
【问题描述】：

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

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

我正在使用引导程序和 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;
}

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

【问题讨论】：

您好，您希望红色边框保持不变？在 Firefox 中，我只能在顶部看到一个，并且它会滚动到视野之外。
是的，我的意思是，它位于 thead 单元格上，因此它应该与 thead 的其余部分及其后代保持一致......我不明白。
我看到了问题，它设置为保持不动但移动。让我再想一想。

标签： javascript html twitter-bootstrap css

【解决方案1】：

这是因为 translate 属性。尝试使用位置属性修复头。这是您的答案代码笔：

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

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

【讨论】：

谢谢，但这破坏了布局。我想出的解决方案保持表的结构完好无损。我只是想摆脱使用边框而不是绝对定位的 :before 元素。

【解决方案2】：

到目前为止，没有不涉及使用固定或绝对定位的广告来更改表格布局的解决方案。最好的解决方案是我自己的，但它实际上并不涉及使用边框。我只是添加：

&:before {
  border: 0;
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background-color: red;
}

到头条，效果很好。我想这已经很好了。 JS 是最小的并且在其他方面是可靠的，并且不会破坏作用于表的其他脚本的功能，或者弄乱我的布局。我希望这对其他人也有帮助！ :)

【讨论】：