相关疑难解决方法(0)

带有粘性标题的响应式引导表

我有一张桌子。我添加到标准 Bootstrap 库的唯一 CSS 是用于实现粘性标头的:

.table-sticky th {
  background: #fff;
  position: sticky;
  top: -1px;
  z-index: 990;
}
Run Code Online (Sandbox Code Playgroud)
<div class="table-responsive p-0 mt-2">
  <table class="table table-sm table-striped table-hover table-sticky">
    <thead>
      <tr>
        <th>#</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1,001</td>
        <td>Lorem</td>
        <td>ipsum</td>
        <td>dolor</td>
        <td>sit</td>
      </tr>
      <tr>
        <td>1,002</td>
        <td>amet</td>
        <td>consectetur</td>
        <td>adipiscing</td>
        <td>elit</td>
      </tr>
    </tbody>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

粘性标题一直有效,直到我将表格包裹在div.table-responsive. 我如何让它们共存?

html css twitter-bootstrap bootstrap-4

8
推荐指数
1
解决办法
5420
查看次数

标签 统计

bootstrap-4 ×1

css ×1

html ×1

twitter-bootstrap ×1