Bootstrap Fixed Header表

Question

我正在尝试使用Bootstrap实现固定的头表。由于bootstrap 3.3.5本身不支持固定头表，基于这个https://bootsnipp.com/snippets/oVlgM，我提出了很好的滚动。

然而，当没有滚动时它看起来很难看。我试着解决了一段时间，但无法修复它。我不是UI专家。

滚动版看起来不错。 https://jsfiddle.net/cdc57pzm/

不滚动 https://jsfiddle.net/suwLv1md/2/

• 数据未正确对齐
• 行超出表格

有人可以帮助我吗？

我尝试将下方更改为100％，但可滚动版本会中断..

.table-fixed thead, .table-fixed tfoot {
    width: 97%;
}

Answer 1

请尝试这个家伙，

.table-fixed thead, .table-fixed tfoot {
width: 100% !important; }

Answer 2

我认为如果你还将tbody的宽度设置为97％，就像thead和tfoot一样。这意味着你的css顶部和底部会有一点变化，如下所示：

.table-fixed thead, .table-fixed tfoot, .table-fixed tbody {
    width: 97%;
    }

@media (max-width: 767px) {
    .table-fixed thead, .table-fixed tfoot {
        width: 97%;
    }
}

喜欢这个小提琴：https://jsfiddle.net/hpvl/suwLv1md/4/

Answer 3

因此，如果您可以使用一些JQ，这就是我找到的作品，我在几个不同的表格中使用它。有些是由Knockout.js创建的，有些是使用PHP和autoscroll动态创建的，有些是静态的。让它们发挥作用的概念是完全相同的。

CSS：

table thead {
  width: 100%;
  display: block;
  position: relative;
}

table tbody {
  display: block;
  overflow-y: hidden; /* Or what ever you choose */
  overflow-x: hidden;
  height: 350px; /* Percents don't really work in a dynamic setting so keep that in mind */
}

JS：

$(table + ' tbody tr:last-of-type td').each(function(a, b, c) {
  var w = $(this).css('width'),
    i = parseInt(a);

   $(table + ' thead tr th').eq(i).css('width', w);
});

几乎是JS使它工作，关键是我们必须将标题单元格设置为与正文相同的宽度。那么当我们有一个会滚动的表体时会发生什么，浏览器会将滚动条的宽度从最后一个单元格中移开。这使我们与标题细胞和体细胞不匹配。在这种情况下的好习惯，如果你需要使你的表流畅，那么除了最后一个列之外，所有列都使用百分比，这样结果是可预测的。

This post指出了我正确的方向。

修改

我忘了提到我实现的所有实例都是bootstrap-3表。