Html 引导固定头表

我正在尝试用引导实现固定头表。由于Bootstrap3.3.5本机不支持固定头表，因此我提出了一个漂亮的滚动条

然而，当没有卷轴时，它看起来很难看。我试着修了一会儿，但修不好。我不是UI专家

滚动版本看起来不错

不带卷轴丑陋

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

有人能帮我吗

我尝试将下面的内容更改为100%，但可滚动的版本会中断

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

请试试这个家伙

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

请试试这个家伙

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

---

我想如果你也把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%;
    }
}

---

就像这把小提琴一样：

我想如果你也将t车身的宽度设置为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%;
    }
}

---

就像这把小提琴：

所以如果你能用一些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使其工作，关键是我们必须将标题单元格设置为与正文相同的宽度。那么，当我们有一个将滚动的表体时，浏览器会从最后一个单元格中隐藏滚动条的宽度。这使我们与头细胞和体细胞不匹配。在这种情况下，如果需要使表格流动，最好在所有列（最后一列除外）上使用百分比，这样结果是可预测的

给我指出了正确的方向

编辑：

---

我忘了提到我实现的所有实例都是bootstrap-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使其工作，关键是我们必须将标题单元格设置为与正文相同的宽度。那么，当我们有一个将滚动的表体时，浏览器会从最后一个单元格中隐藏滚动条的宽度。这使我们与头细胞和体细胞不匹配。在这种情况下，如果需要使表格流动，最好在所有列（最后一列除外）上使用百分比，这样结果是可预测的

给我指出了正确的方向

编辑：

---

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

已经尝试过了。它破坏了数据，并且没有正确对齐。这是我的问题，我需要它的页脚。也没有数据对齐问题，因为我们在页脚中显示总计，当我用表格数据更新时，它不正确，数据未对齐在正确的位置。此外，页脚未对齐。只是突出显示宽度和滚动条出现问题的根本原因已经尝试过了。它破坏了数据，并且没有正确对齐。这是我的问题，我需要它的页脚。也没有数据对齐问题，因为我们在页脚中显示总计，当我用表格数据更新时，它不正确，数据未对齐在正确的位置。此外，页脚未对齐。只需突出显示宽度和滚动的根本原因