拥有带有粘性标题的表格的最佳方法是什么？

Question

我目前正在做的是 2 个表格，一个用于标题，一个用于数据，结合 table-layout:fixed 和每列的固定宽度。

我不喜欢这种解决方案，因为我必须不断调整宽度，而且当表格布局不固定时，它们看起来不像自动调整的那样好。

我还考虑了一个 JS 解决方案，其中布局数据表，然后 JS 选取每个列宽并将其应用于标题表。这样做的好处是流动的td 宽度由内容决定。问题是表格内容可以动态变化，JS 脚本需要知道这一点，以便它可以重新计算宽度...... ew。

有没有更好的方法？

Answer 1

最好使用一些插件，例如jQuery Plugin for Fix Header Table

或者如果你想要纯 CSS 并想知道它是如何工作的。你可以试试下面的小提琴https://jsfiddle.net/dPixie/byB9d/3/light/

如果 div 位于 TH 内，则全部显示内容

th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}