Question

我发现了一种不错的“固定表”样式，但不足以满足我的需求。我还需要冻结第二行（标题1.x）和最后一列（标题8.1）。我做了一些更改，从td到th（在第一列示例之后），但是没有用。有什么想法吗？

这是我的代码：

 .table-scroll {
      position: relative;
      width: 100%;
      z-index: 1;
      margin: auto;
      overflow: auto;
      height: 350px;
    }
    
    .table-scroll table {
      width: 100%;
      min-width: 1280px;
      margin: auto;
      border-collapse: separate;
      border-spacing: 0;
    }
    
    .table-wrap { position: relative; }
    
    .table-scroll th, .table-scroll td {
      padding: 5px 10px;
      border: 1px solid #000;
      background: #fff;
      vertical-align: top;
    }
    
    .table-scroll thead th {
      background: #333;
      color: #fff;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    
    .table-scroll tfoot, .table-scroll tfoot th, .table-scroll tfoot td {
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      background: #666;
      color: #fff;
      z-index: 4;
    }
    
    th:first-child {
      position: -webkit-sticky;
      position: sticky;
      left: 0;
      z-index: 2;
      background: #ccc;
    }
    
    thead th:first-child, tfoot th:first-child { z-index: 5;}

 <div id="table-scroll" class="table-scroll">
      <table id="main-table" class="main-table">
        <thead>
          <tr>
            <th scope="col">Header 1</th>
            <th scope="col">Header 2</th>
            <th scope="col">Header 3</th>
            <th scope="col">Header 4</th>
            <th scope="col">Header 5</th>
            <th scope="col">Header 6</th>
            <th scope="col">Header 7</th>
            <th scope="col">Header 8</th>
          </tr>
          <tr>
            <th scope="col">Header 1.1</th>
            <th scope="col">Header 2.1</th>
            <th scope="col">Header 3.1</th>
            <th scope="col">Header 4.1</th>
            <th scope="col">Header 5.1</th>
            <th scope="col">Header 6.1</th>
            <th scope="col">Header 7.1</th>
            <th scope="col">Header 8.1</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
          <tr>
            <th>Fixed left</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <th>Fixed right</th>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>Footer 1</th>
            <td>Footer 2</td>
            <td>Footer 3</td>
            <td>Footer 4</td>
            <td>Footer 5</td>
            <td>Footer 6</td>
            <td>Footer 7</td>
            <th>Footer 8</th>
          </tr>
        </tfoot>
      </table>
</div>

https://jsfiddle.net/wsr2ea9m/

Answer 1

新答案：

TL; DR;
这是Firefox上的工作代码：https://jsfiddle.net/vjmc52tf/
这是Chrome的工作代码：https://jsfiddle.net/36yabef7/

总结一下您的问题，据我了解，我假设您要冻结表：

第一列（您已完成）
最后一列（尚未完成）
前2行（未按预期工作）
最后一行/页脚（完成）

由于您已经完成了（1）任务，因此（2）基本相同，您只需要添加:last-child选择器即可您已声明要冻结第一列的样式，然后再添加1行right: 0;，最后一列也将按预期冻结，这是代码：

th:first-child,
th:last-child { // add th:last-child
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  right: 0; // add right: 0;
  z-index: 2;
  background: #ccc;
}

thead th:first-child,
tfoot th:first-child,
thead th:last-child, // add thead th:last-child 
tfoot th:last-child { // add tfoot th:last-child
  z-index: 5;
}

要执行（3）任务，请注意，当前position: sticky的Edge和Chrome have a bug无法在thead和{{1}上运行}元素，但可以在tr元素上使用它。

因此，要使其在Firefox上运行更直观，只需冻结th元素而不是thead：

.table-scroll thead th

在Chrome上，由于存在该错误，因此比较棘手，您必须手动冻结每个单元格.table-scroll thead th { background: #333; color: #fff; position: -webkit-sticky; position: sticky; top: 0; } // become -------------------- .table-scroll thead th { background: #333; color: #fff; } .table-scroll thead { position: -webkit-sticky; position: sticky; top: 0; z-index: 10; // need this to work correctly }（就像您所做的一样），然后手动重新计算每个单元格的.table-scroll thead th位置在第一行：

top

固定柱不起作用-thead，tbody，tfoot

1 个答案: