带有粘性标题、水平滚动和动态单元格宽度的纯 HTML/CSS 表格？答案

【问题标题】：Pure HTML/CSS table with sticky header, horizontal scroll and dynamic cell width?带有粘性标题、水平滚动和动态单元格宽度的纯 HTML/CSS 表格？
【发布时间】：2018-01-10 06:49:05
【问题描述】：

我需要带有特性的纯 HTML/CSS 表格：

垂直滚动页面时标题粘滞
基于内容的单元格宽度（标题单元格与列中最宽的单元格一样宽）
水平滚动，不会破坏上述任何一项

我可以很容易地从上面用三分之二的子弹来准备 sn-p，但是标记所有的东西让我心烦意乱。

有没有人准备好工作 sn-p 或知道如何实现这一目标？感谢任何建议。

@edit 在这里进行中的工作：https://codepen.io/mslawins/pen/PEQRyJ 下面还有 CSS 部分：

table {
  margin: auto;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  width: 300px;

  display: block;
  border-collapse: collapse;

  //overflow-x: scroll; // adding this breaks sticky
}

th {
  background-color: pink;
  width: 100px; // without this "header collapses", when using sticky/block trick
  padditable {
  margin: auto;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  width: 300px;

  display: block;
  border-collapse: collapse;

  //overflow-x: scroll; // adding this breaks sticky
}

th {
  background-color: pink;
  width: 100px; // without this "header collapses", when using sticky/block trick
  padding: 3px;
}

td {
  background-color: white;
  width: 100px; // without this, width is content based, but this does not propagate to th,
  //  because of sticky/block trick
  padding: 3px;
  border: 1px solid rgba(0, 0, 0, 0.8);
}

thead {
  display: block;
  position: sticky;
  top: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

thead tr {
  display: table;
}

【问题讨论】：

尝试包含您迄今为止尝试过的代码 - 它使每个人都更容易提供帮助和建议（ps。我没有投反对票）。预计至少有人在询问 stackoverflow 之前尝试过，并展示迄今为止尝试过的东西。

标签： html css html-table sticky

【解决方案1】：

在滚动developer.mozilla.org/en-US/docs/Web/CSS/position 的容器内无法使用粘性标题（使用position: sticky）。所以，没有 JavaScript 就无法实现。

【讨论】：

【解决方案2】：

您可以使用 div 表和 position:sticky 来做到这一点

.td.header {
  position: sticky;
  top:0px;
}

看看这个jsfiddle的简单例子。

【讨论】：