表格添加滚动条遇问题：设置display:block后thead/tbody宽度缩小

我帮你搞定这个表格滚动条的坑！你遇到的宽度缩水问题，本质是把thead/tbody改成display: block后，它们脱离了原生table的布局上下文，默认的自动列宽规则就失效了。咱们用下面的方法来修复：

核心思路 #

通过固定表格布局让列宽可控，同时让thead和tbody的列宽严格对应，既实现tbody滚动，又保证表格整体宽度正常。

具体实现代码 #

/* 第一步：设置表格固定布局，让列宽由我们定义 */
table {
  table-layout: fixed;
  width: 100%; /* 可以设固定值比如800px，也用100%占满容器 */
  border-collapse: collapse; /* 可选，让边框更紧凑美观 */
}

/* 第二步：处理thead，设为block并定义列宽 */
thead {
  display: block;
  background: #f5f5f5; /* 可选，给表头加背景区分 */
}
thead th {
  width: 33.33%; /* 根据你的列数调整，比如3列就均分宽度 */
  padding: 8px;
  text-align: left;
}

/* 第三步：设置tbody滚动区域，匹配列宽 */
tbody {
  display: block;
  height: 200px; /* 这里设你想要的固定高度，超过就会出现垂直滚动条 */
  overflow-y: auto;
}
tbody td {
  width: 33.33%; /* 必须和对应th的宽度完全一致 */
  padding: 8px;
  border-top: 1px solid #eee;
}

自定义列宽的小技巧 #

如果你的列需要不同宽度（比如第一列要宽一些），只需要给对应的th和td单独设置宽度就行：

thead th:first-child {
  width: 40%;
}
thead th:nth-child(2),
thead th:nth-child(3) {
  width: 30%;
}

tbody td:first-child {
  width: 40%;
}
tbody td:nth-child(2),
tbody td:nth-child(3) {
  width: 30%;
}

为什么之前的方法无效？ #

你之前只给tbody设了height和overflow: auto但没改表格布局，加上把thead/tbody改成block后，它们不再遵循table的列宽同步规则，自然会出现宽度缩小、列对齐混乱的问题。用table-layout: fixed就能强制列宽按我们设置的来，避免自动收缩。

内容的提问来源于stack exchange，提问作者Pratik Kale