如何实现表格表头与对应主体列取两者中较宽的宽度？

我看了你的代码，问题核心在于你给<thead>和<tbody>设置了不同的display属性——thead用了display:table，tbody却是display:block，这就导致两者的表格布局完全独立，列宽没法跟着表头和内容里更宽的那一方自动适配。要同时实现表头固定和列宽联动，咱们得调整布局逻辑，让表头和主体共享同一个表格布局上下文。

修改后的完整代码 #

HTML #

<h2>Header fixed</h2>
<br/>
<br/>
<table>
  <thead>
    <tr>
      <th>HEADER</th>
      <th>HEADER 2</th>
      <th>HEADER 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1. DATA - This is a long group name that should determine the column width</td>
      <td>1. DATA 2</td>
      <td>1. DATA 3</td>
    </tr>
    <tr>
      <td>2. Another very long group name to test column width</td>
      <td>2. DATA 2</td>
      <td>2. DATA 3</td>
    </tr>
    <!-- 可添加更多行测试滚动效果 -->
  </tbody>
</table>

CSS #

table {
  max-width: 980px;
  margin: auto;
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 5px 10px;
  border: 1px solid #000;
  /* 可选：如果不想内容换行，保留这行让列宽由最长内容决定 */
  white-space: nowrap;
}

thead {
  background: #f9f9f9;
  /* 用sticky实现表头固定，比拆分display更稳妥 */
  position: sticky;
  top: 0;
}

tbody {
  max-height: 300px;
  overflow-y: auto;
  display: block;
}

tbody tr {
  display: table;
  width: 100%;
  /* 把fixed改成auto，让浏览器自动根据内容计算列宽 */
  table-layout: auto;
}

/* 修复滚动条导致的列对齐偏移 */
thead tr {
  display: table;
  width: calc(100% - 17px);
}

/* 自定义滚动条样式 */
tbody::-webkit-scrollbar {
  width: 17px;
}
tbody::-webkit-scrollbar-track {
  background: Scrollbar;
}
tbody::-webkit-scrollbar-thumb {
  background: ThreeDFace;
  box-shadow: inset 0 0 5px ThreeDDarkShadow;
}
tbody::-webkit-scrollbar-thumb:hover {
  background: ThreeDHighlight;
}

关键修改说明 #

• 用position: sticky做表头固定：这比拆分thead和tbody的display类型更靠谱，能保持表格布局的统一性，避免列宽脱节。
• 调整table-layout为auto：让浏览器自动识别表头和单元格里的最长内容，以此为基准设置列宽，实现表头与主体列宽的联动匹配。
• 处理滚动条偏移：因为tbody设为display:block会出现滚动条，给thead的宽度减去滚动条宽度，就能避免列对齐错位的问题。
• 可选的white-space: nowrap：如果希望内容不换行，完全由最长内容撑列宽，就保留这行；如果允许内容换行，删掉即可。

这样修改后，第一列的宽度会自动适配表头和tbody里较长的内容，同时表头会固定在顶部，滚动tbody时不会跟着移动。

内容的提问来源于stack exchange，提问作者Joemar Zeta