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

我需要具有以下功能的纯HTML/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;
}

---

粘性标题（使用

位置：Sticky

）不能在滚动的容器中使用。因此，没有JavaScript就无法实现这一点。

您可以使用div表和position:sticky来实现这一点

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

---

看看这个简单的例子。

试着加入到目前为止你已经尝试过的代码，这会让每个人都更容易提供帮助和建议（注：我没有投反对票）。人们希望在询问stackoverflow之前至少尝试一下，并展示到目前为止已经尝试过的东西。