Question

我遇到了最奇怪的事情。我正在使用一个简单的jquery脚本来使thead保持原位，而tbody滚动。除了边框的一些奇怪行为外，它的效果非常好。看看笔，你可以看到每个底部的红色边框。我已经尝试将它放在thead和thead的tr上，但它总是表现得一样。它本身消失了吗？我甚至都不确定。

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

我正在使用bootstrap和SCSS。

我现在的解决方案是添加一个：之前只是一个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

Answer 2

到目前为止，没有任何解决方案不涉及使用固定或绝对定位的thead更改表格的布局。最好的解决方案是我自己的，但它实际上并没有使用边框。我只想补充一下：

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

到thead的那个并且效果很好。我想这和它一样好。 JS是最小的，并且是可靠的，并且不会破坏作用于表的其他脚本的功能，或者破坏我的布局。我希望这也有助于其他人！：）

具有固定标头的表上的奇怪边界行为

2 个答案: