具有粘性 header、水平滚动和动态单元格宽度的纯 HTML/CSS table？

Question

我需要纯 HTML/CSS table 具有以下功能：

垂直滚动页面时粘性header
基于内容的单元格宽度（header 单元格与列中最宽的单元格一样宽）
水平滚动，不破坏上述之一

我可以很容易地用上面的三分之二来准备片段，但是标记所有都让我费心了。

有没有人准备好工作片段或知道如何实现这个？感谢任何建议。

@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;
}

Answer 1

粘性 header（使用 position: sticky）在滚动的容器内是不可能的 developer.mozilla.org/en-US/docs/Web/CSS/position。因此，没有 JavaScript.

就无法实现这一目标

Answer 2

您可以使用 div 表格和 position:sticky

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

查看这个 jsfiddle 的简单示例。

具有粘性 header、水平滚动和动态单元格宽度的纯 HTML/CSS table？

Pure HTML/CSS table with sticky header, horizontal scroll and dynamic cell width?

html

css

html-table

sticky