在所有设备上使用Bootstrap响应式表格并固定标题？

Question

我目前有一个Bootstrap表格，我面临的问题是没有移除Bootstrap .table-responsive类，粘性标题不起作用。是否可以在不使用JS的情况下解决这个问题？

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-fixed {
  width: 100%;
}


/* This will work on every browser but Chrome Browser */

.table-fixed thead {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
  background-color: #FFF;
}


/*This will work on every browser*/

.table-fixed thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: #FFF;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table-responsive">
  <table class="table table-striped table-fixed">
    <thead>
      <tr>
        <th>Test</th>
        <th>Test</th>
      </tr>
    </thead>
  </table>
</div>

- James

---

我不这么认为。就在今天，我通过执行$('.container').off('scroll')并添加CSS position:sticky来解决了JQuery tablesorter上的固定标题问题。如果我们更新tablesorter，则可以使用CSS而不是JS进行粘性定位。也许看看Bootstrap表是否有类似的情况？祝你好运，如果你解决了它，请让我知道。 - MaKR

这是一个已知的问题，请查看：https://dev59.com/JVcP5IYBdhLWcg3wr78G#44004100 - Dev Man

@ImmortalDude 如果我删除table-responsive类，那么它的工作方式就类似于那篇文章，但是我也需要表格具有响应性。 - James

Answer 1

在Chrome中，position: sticky无法与某些表格元素（thead/tr）一起使用。您已经在thead和th中都添加了sticky position，请尝试以下步骤。

1. 从thead中删除stick position，仅保留在th中
2. 为table-responsive类添加overflow-x: visible。

谢谢

- ZealousWeb

Answer 2

请参考以下代码使表头固定：

见下方代码以使表头固定

<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border
          </td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  section {
    position: relative;
    border: 1px solid #000;
    padding-top: 37px;
    background: #500;
  }
  
  section.positioned {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 800px;
    box-shadow: 0 0 15px #333;
  }
  
  .container {
    overflow-y: auto;
    height: 160px;
  }
  
  table {
    border-spacing: 0;
    width: 100%;
  }
  
  td+td {
    border-left: 1px solid #eee;
  }
  
  td,
  th {
    border-bottom: 1px solid #eee;
    background: #ddd;
    color: #000;
    padding: 10px 25px;
  }
  
  th {
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
  }
  
  th div {
    position: absolute;
    background: transparent;
    color: #fff;
    padding: 9px 25px;
    top: 0;
    margin-left: -25px;
    line-height: normal;
    border-left: 1px solid #800;
  }
  
  th:first-child div {
    border: none;
  }
</style>

- Mashaim Tahir