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">

问题是如果我没有在其他表中包含固定表，那么其他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 {定义来解决此问题，因为它影响了Table类的tbody。

如何在不影响Bootstrap中

1 个答案: