html - 固定列不起作用 - thead、tbody、tfoot

Question

我找到了一个不错的“固定表格”样式，但不足以满足我的需求。我还需要卡住第二行 (Header 1.x) 和最后一列 (Header 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

新答案:

长话短说；
这是 Firefox 上的工作代码:https://jsfiddle.net/vjmc52tf/
这是 Chrome 的工作代码:https://jsfiddle.net/36yabef7/

总结一下你的问题，据我所知，我假设你希望你的表卡住:

1. 第一栏(你做的)
2. 最后一栏(还没做完)
3. 前 2 行(未按预期工作)
4. 最后一行/页脚(完成)

因为你已经完成了(1)任务，所以(2)基本上是一样的，你只需要添加:last-child您已声明卡住第一列的那些样式的选择器，并再添加一行 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) 任务，请注意 Edge 和 Chrome have a bug目前position: sticky不适用于 thead和 tr元素，但可以在 th 上使用它元素。

• 因此，要使其在 Firefox 上运行，更直观，只需卡住 thead元素而不是 .table-scroll thead th :

.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
}

• 在 Chrome 上，由于这个错误，它更棘手，你必须手动卡住每个单元格 .table-scroll thead th (就像你所做的那样)，然后手动重新计算 top那些不在第一行的单元格的位置:

.table-scroll thead th {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

// add this to make the second row work --------------------
.table-scroll tr:nth-child(2) th {
  top: 30px; 
}