如何让表格列宽度完全适配内容，仅指定列自适应拉伸？

你当前的问题是：表格设置width:100%后，带.autoSize类的列（比如"Ding"列）在调整屏幕尺寸时会被拉伸，无法严格贴合文本宽度。要解决这个问题，只需调整.autoSize的CSS规则，强制这类列仅占用内容所需宽度，把剩余空间全部留给.halfSize列。

修改后的CSS代码 #

table {
  font-size: 16px;
  border-collapse: collapse;
  background-color: #2c3d4b;
  box-shadow: 3px 3px 3px;
  width: 100%; /* 保持表格占满容器宽度 */
}
td, th {
  padding: 25px 25px;
  text-align: left;
  border: 1px solid black;
}
thead {
  box-shadow: 0 3px 6px black;
  background-color: royalblue;
}

.halfSize {
  width: 60%; /* 该列自动填充表格剩余空间 */
}

.autoSize {
  width: 1%; /* 强制列优先收缩到最小宽度 */
  white-space: nowrap; /* 内容不换行，确保列宽刚好适配文本 */
}

对应的HTML代码（无需修改） #

<table>
  <thead>
    <tr>
      <th class="halfSize">Column 1</th>
      <th class="autoSize">Column 2</th>
      <th class="autoSize">Ding</th>
      <th class="autoSize">Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
      <td>R1</td>
      <td>Row 1 Column 4</td>
    </tr>
  </tbody>
</table>

原理说明 #

• width:1%给.autoSize列设置极小宽度值，浏览器会优先让这类列收缩到内容所需的最小宽度
• white-space:nowrap确保列内文本不换行，避免因换行撑开列宽
• 表格width:100%保证整体占满容器，所有剩余空间都会被.halfSize列占用，实现仅指定列拉伸的效果

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