如何实现列宽自适应内容、溢出显示省略号的特殊对齐表格？

下面是基于CSS Grid的解决方案，完美匹配你的需求：

核心思路 #

用Grid布局构建表格结构，通过minmax(min-content, max-content)定义列宽，保证列宽优先由列内最大元素决定；固定gap值实现24px的列间距；给单元格内容添加溢出省略样式，当容器宽度不足时自动收缩文本并显示省略号；单独设置最后一列右对齐。

代码实现 #

以4列表格（N=4）为例：

HTML #

<div class="table-container">
  <!-- 表头 -->
  <div class="table-row">
    <div class="table-cell">Column A</div>
    <div class="table-cell">Column B</div>
    <div class="table-cell">Column C</div>
    <div class="table-cell align-right">Column D</div>
  </div>
  <!-- 分隔线 -->
  <div class="table-row divider">
    <div class="divider-line"></div>
    <div class="divider-line"></div>
    <div class="divider-line"></div>
    <div class="divider-line"></div>
  </div>
  <!-- 数据行1 -->
  <div class="table-row">
    <div class="table-cell">Cell 1234</div>
    <div class="table-cell">Cell 2</div>
    <div class="table-cell">Cell 5</div>
    <div class="table-cell align-right">Cell 6</div>
  </div>
  <!-- 数据行2 -->
  <div class="table-row">
    <div class="table-cell">Cell 3</div>
    <div class="table-cell">Cell 4</div>
    <div class="table-cell">Cell 5555555555555</div>
    <div class="table-cell align-right">Cell 6</div>
  </div>
</div>

CSS #

.table-container {
  width: 100%; /* 强制表格不溢出容器 */
  display: grid;
  /* 定义列规则：前N-1列和最后一列均优先取内容最大宽度，空间不足时收缩到内容最小宽度 */
  grid-template-columns: repeat(3, minmax(min-content, max-content)) minmax(min-content, max-content);
  gap: 24px; /* 固定列间距24px */
}

.table-row {
  display: contents; /* 让行元素不产生布局盒子，子单元格直接对应Grid列，保证列对齐 */
}

.table-cell {
  white-space: nowrap; /* 文本强制不换行 */
  overflow: hidden; /* 溢出内容隐藏 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
}

/* 最后一列右对齐 */
.align-right {
  text-align: right;
}

/* 分隔线样式 */
.divider {
  margin: 4px 0;
}

.divider-line {
  height: 1px;
  background-color: #000;
}

关键细节说明 #

• minmax(min-content, max-content)：max-content保证列宽由列内最长内容决定，当容器宽度不足时，min-content让列收缩到能容纳省略号的最小宽度，避免表格溢出。
• display: contents：消除行元素的布局层级，让单元格直接对应Grid列，确保表头、数据行的列完全对齐。
• 固定gap:24px：无论屏幕如何缩放，列间距始终保持24px，不会挤压或拉伸。

针对你之前尝试方案的问题解释 #

1. table标签方案：table-layout: auto时，td默认不会限制内容溢出，需给td内部包裹元素并设置省略号样式，但table的border-spacing无法保证收缩时列间距固定，且列收缩逻辑远不如Grid灵活，因此不推荐。
2. Grid方案之前的问题：你之前遇到的“从左到右挤占空间”，是因为未使用minmax(min-content, max-content)定义列宽，改用该规则后，列会优先保留内容宽度，空间不足时均匀收缩，符合需求。

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