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

EN

我想创建一个具有固定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应该说明这些场景：

<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是OK (香草和干净的JavaScript，而不是jQuery插件)。我不关心旧浏览器的支持(如果有它就太好了，或者至少能达成一个可以在旧浏览器上优雅地降级的解决方案，但这是可选的)……如果最终的解决方案如预期的那样工作，我甚至可以接受使用div代替表节点……那么，在2016年，有了现代浏览器和CSS，这有可能实现吗？！

编辑：

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

更新：

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

更新2:

它现在起作用了！