如何使用固定标题使 1 个表可滚动而不影响 Bootstrap 中的其他表答案

【问题标题】：How to make 1 table scrollable with fixed header without affecting other tables in Bootstrap如何使用固定标题使 1 个表可滚动而不影响 Bootstrap 中的其他表
【发布时间】：2016-08-26 12:56:55
【问题描述】：

我花了一天多的时间弄清楚一些非常简单的事情。我有一个网站，我使用大约 10 张桌子。我希望这 10 个表中只有 1 个具有固定标题和可滚动条。

我在网上找到了一个很好的例子并对其进行了修改。我可以有一个带有固定标题和可滚动条的表格。

新的 CSS

.table-fixed tbody {
    display:block;
    max-height:625px;
    overflow-y: auto;
}
.table-fixed thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
.table-fixed thead {
    width: calc( 100% - 1em )
}

我将 table-fixed 类添加到我的表定义中并且它可以工作。

<table class = "table table-bordered table-hover table-striped table-condensed table-fixed">

问题是如果我不把table-fixed包含在其他表中，其他9个表都搞砸了。例如：

没有向其他表格添加表格固定类

      <table class = "table table-bordered table-hover table-striped table-condensed">
        <thead>
          <tr>
            <th style="text-align: center; vertical-align: middle;">something</th>
            <th style="text-align: center; vertical-align: middle;">something</th>
            <th style="text-align: center; vertical-align: middle;">something</th>
            <th style="text-align: center; vertical-align: middle;">something</th>
          </tr>
        </thead>
        <tbody>
            <tr>
              <td style="text-align: center; vertical-align: middle;">something</td>
              <td style="text-align: center; vertical-align: middle;">something</td>
              <td style="text-align: center; vertical-align: middle;">something</td>
              <td style="text-align: center; vertical-align: middle;">something</td>
            </tr>
        <tbody>
      </table>

我该如何解决这个问题？我希望对 CSS 的更改只影响 1 个表。我的固定表类有效，但看起来我正在修改它影响全局的 tbody。有没有办法解决这个问题？

【问题讨论】：

将你想要的 css 添加到不同的 css 类中，并且只将它添加到你想要更改的一个表中。
我是 CSS 新手，我对您的评论感到困惑。我确实在定义属性的地方创建了一个名为 table-fixed 的新类。然后我将这个 css 类添加到我只想要的表中。这不是创建一个新课程吗？
是的，但您是说它也影响了其他表？如果您只是将该类添加到应该解决您的问题的一个表中，或者从所有其他表中删除 table-fixed 类。
这正是我正在做的。我只将table-fixed 添加到 1 个表中。其他表具有table 类，如上所示。但不知何故，.table-fixed 的修改也改变了table 类。
试试这个：.table-fixed > tbody { display:block;最大高度：625px；溢出-y：自动； } .table-fixed > thead, tbody tr { display:table;宽度：100%；表格布局：固定； } .table-fixed > thead { width: calc( 100% - 1em ) }

标签： html css django twitter-bootstrap

【解决方案1】：

归功于 sringland。

我修改了原代码：

.table-fixed tbody {
    display:block;
    max-height:625px;
    overflow-y: auto;
}
.table-fixed thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
.table-fixed thead {
    width: calc( 100% - 1em )
}

到这里：

.table-fixed > tbody {
    display:block;
    max-height:625px;
    overflow-y: auto;
}
.table-fixed > thead {
    display:table;
    width:100%;
    table-layout:fixed;
}
.table-fixed > tbody > tr {
  display:table;
  width:100%;
  table-layout:fixed;
}
.table-fixed > thead {
    width: calc( 100% - 1em )
}

该问题已通过添加 > 以仅影响直系子级并分解 thead, tbody tr { 定义得到解决，因为它影响了 Table 类的 tbody。

【讨论】：