如何为100%宽度的CSS表格设置第2、3列宽度尽可能小且内容不换行（响应式友好方案）

这其实是表格布局里很常见的需求，不用固定宽度也能轻松实现，核心是利用CSS的两个关键属性，让指定列自动收缩到内容的最小宽度，同时保证内容不换行，第一列则自动填充剩余空间，完美适配响应式布局。

具体实现方案 #

你只需要给第2、3列的表头和单元格添加以下CSS规则，同时保持表格的width: 100%设置即可：

table {
  width: 100%;
  border-collapse: collapse; /* 可选，优化表格边框样式 */
}

/* 定位第2、3列的表头和单元格 */
table th:nth-child(2),
table th:nth-child(3),
table td:nth-child(2),
table td:nth-child(3) {
  white-space: nowrap; /* 强制内容不换行，保证列宽刚好容纳内容 */
  width: 1%; /* 触发收缩逻辑：告诉浏览器优先将列收缩到最小必要宽度 */
  padding: 8px 12px; /* 可选，添加内边距避免内容拥挤 */
}

/* 可选：给第一列添加内边距优化排版 */
table th:nth-child(1),
table td:nth-child(1) {
  padding: 8px 12px;
}

修改后的完整HTML代码：

<table>
<tbody>
<tr>
<th>Name : long width</th>
<th>Value</th>
<th>ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
<!-- 测试长内容场景：第2、3列会自动适配内容宽度，不会换行 -->
<tr>
<td>Another super long content line that will wrap in the first column as needed</td>
<td>AbsolutelyYes</td>
<td>12345678</td>
</tr>
</tbody>
</table>

原理说明 #

1. white-space: nowrap：强制列内内容不换行，确保列的最小宽度就是内容本身的宽度，不会因为换行而缩小。
2. width: 1%：这是一个实用的布局技巧，在表格默认的table-layout: auto模式下，浏览器会先计算所有列的最小必要宽度，再将剩余空间分配给其他列。设置极小的宽度值会让浏览器优先收缩该列，最终只占用内容需要的最小宽度，而第一列会自动吸收表格的剩余空间，完全不需要固定宽度，天然支持响应式。

如果后续遇到内容过长超出容器的情况，还可以给这些列追加max-width + overflow: hidden + text-overflow: ellipsis来实现省略号效果，但如果需求是保证内容完全显示不换行，当前方案就足够了。

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