html - 如何在不影响 Bootstrap 中的其他表的情况下使 1 个表可滚动并带有固定标题

Question

我花了一天多的时间想出一些非常简单的东西。我有一个网站，我使用大约 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。有办法解决这个问题吗？

Answer 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 { 定义解决了这个问题，因为它影响了 表类。