如何使用flexbox等CSS技术实现类表格的不等宽列对齐效果

实现方案 #

你需要的两列对齐布局可以通过CSS Grid或Flex实现，两种方案如下：

方案1：CSS Grid 实现（更推荐，无JS）

完全符合你要的「第一列尽可能小、自动对齐、支持第二列单独设置宽度」的需求，兼容所有现代浏览器，不需要修改你现有的HTML结构：

.lines {
  display: grid;
  /* 第一列宽度由最长内容决定，第二列占剩余空间 */
  grid-template-columns: auto 1fr;
  column-gap: 16px; /* 可自定义两列间距 */
  row-gap: 6px; /* 可自定义行间距 */
}
.line {
  /* 让内层title、description直接参与父级grid布局，不破坏原有HTML结构 */
  display: contents;
}
.title {
  white-space: nowrap; /* 不需要标题折行可加，避免短内容意外换行 */
}
/* 单独给某一行的第二列设置自定义宽度，不会影响其他行 */
.description.special-width {
  width: 240px;
}

方案2：Flex 实现（需配合少量JS）

因为Flex布局中每一行.line是独立的容器，默认无法自动同步不同行的第一列宽度，需要用JS计算最大宽度后统一设置：

.line {
  display: flex;
  gap: 16px;
  margin-bottom: 6px;
}
.title {
  flex-shrink: 0;
  white-space: nowrap;
}
.description {
  flex-grow: 1;
}

// 统一同步所有第一列的宽度
const titles = document.querySelectorAll('.title')
let maxTitleWidth = 0
titles.forEach(el => maxTitleWidth = Math.max(maxTitleWidth, el.offsetWidth))
titles.forEach(el => el.style.minWidth = `${maxTitleWidth}px`)

两种方案都可以完全实现和原生table一致的展示效果，也避开了display: table的各种兼容性和自定义难的问题。

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