javascript - 具有固定页眉和页脚以及不固定宽度的可滚动正文的 HTML 表格

Question

我想创建一个表格，其中包含固定的 thead 和 tfoot 以及可滚动的 tbody!

我尝试了几种方法，包括纯 CSS 和 CSS + Javascript，但它们都很弱且不可靠，我可以通过更改演示中的标记轻松破坏它们。

我想要的是一种让表格表现得像表格的方法，这意味着浏览器将根据内容自动调整列(都在页面在窗口调整大小的情况下加载它)以及在这些情况下:

1. 如果列标题的内容 (thead > tr > th) 大于列主体的内容 (tbody > tr > td)并且大于列页脚的内容 (tfoot > tr > td) 列应根据列标题的大小调整大小

2. 如果列主体的内容 (tbody > tr > td) 大于列标题的内容 (thead > tr > th)并且大于列脚注的内容 (tfoot > tr > td) 列应根据列正文的大小调整大小

3. 如果列脚的内容 (tfoot > tr > td) 大于列标题的内容 (thead > tr > th)并且大于列主体的内容 (tbody > tr > td) 列应根据列脚的大小调整大小

下面的表应该阐明场景:

<table>
  <thead>
    <tr>
      <th>Header one *leads the width* (case 1)</th>
      <th>Header two</th>
      <th>Header three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Column one</td>
      <td>Column two *leads the width* (case 2)</td>
      <td>Column three</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer one</td>
      <td>Footer two</td>
      <td>Footer three *leads the width* (case 3)</td>
    </tr>
  </tfoot>
</table>

我想要一个干净(尽可能)和可靠的解决方案，适用于不同的场景，可能只有 CSS，但 JavaScript 也可以(vanilla 和干净的 JavaScript，而不是 jQuery 插件)。我不关心旧浏览器支持(拥有它或至少达到可以在旧浏览器上正常降级但它是可选的解决方案会很棒)......我什至可以接受使用 div s 而不是表节点...所以在 2016 年，使用现代浏览器和 CSS 这可能以某种方式实现吗？!

编辑:

正文应垂直滚动，表格可以有任意数量的列

更新:

我想到了这个解决方案:https://codepen.io/daveoncode/pen/LNomBE但我仍然不是 100% 满意。主要问题是我无法为页眉和页脚单元格设置不同的背景。

更新 2:

现在可以了!

Answer 1

仅使用 CSS 的具有固定页眉和页脚以及可滚动正文且不固定宽度的 HTML 表格。

这是简单的逻辑，我们可以在示例下面使用表头放置 position: sticky 方法:

table th {
position:sticky;
top: 0;
}