0

我想使用纯 CSS 制作一个带有固定标题、可滚动 tbody 和可变列宽的 HTML 表格。

我做了theadandtbody display: block并添加了固定的列宽th，td除了需要占据整个可用宽度的第一列。

table {
  width: 100%;
  border-collapse: collapse;

  td:nth-child(1), th:nth-child(1) { width: 100%; }
  td:nth-child(2), th:nth-child(2) { min-width: 100px; }
  td:nth-child(3), th:nth-child(3) { min-width: 100px; }

  thead {
    display: block;
  }
  tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 300px;
  }
}

除了滚动条未对齐问题外，一切都运行良好。滚动条将内容向左推某些像素，这在浏览器中是不固定的。

我想知道它是否可以通过一些 CSS 调整来解决？

这是完整的例子：https ://codepen.io/anon/pen/qqVOON/

4

0 回答 0