CSS display:table布局如何让第一列仅自适应内容不占50%宽度

实现方案 #

你可以通过给第一列设置极小宽度的方式实现需求，在表格默认的table-layout: auto布局规则下，浏览器会自动将第一列宽度收缩到刚好适配内容的尺寸，剩余的容器宽度会全部分配给第二列。

只需在原有CSS基础上新增如下样式即可：

.table-cell.a {
  width: 1px;
  /* 可选配置：如果需要第一列内容强制不换行，可添加下行 */
  white-space: nowrap;
}

你也可以选择给第二列设置占满剩余宽度的属性，效果完全一致：

.table-cell.b {
  width: 100%;
}

原理解释 #

• 你的表格容器设置了width: 100%，默认场景下浏览器会平均分配各列宽度，所以会出现两列各占50%的情况
• 上述两种写法都会触发表格自动布局算法的适配逻辑：第一列仅占用容纳内容所需的最小宽度，第二列占满所有剩余空间，不需要给第一列设置固定宽度，内容变化时第一列宽度也会自动同步调整。

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