Question

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

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

我可以轻松地从上面准备三个子弹中的两个子弹片，但标记所有这些都让我大吃一惊。

有没有人准备好工作片段或想法如何实现这一目标？感谢任何建议。

@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

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

Answer 2

您可以使用div表和position：sticky

完成此操作

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

请查看此jsfiddle以获取简单示例。

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

2 个答案: