如何实现div模拟表格布局的固定/自适应单元格及文本省略效果？

嘿，我刚好踩过类似的table布局坑！用div模拟表格时，要同时满足固定宽、自适应、内容收缩和文本省略这几个需求，确实需要调整几个关键的CSS属性，我给你两种可行的方案：

方案一：基于Table布局实现（贴合你的当前写法） #

先上代码：

HTML结构 #

<div class="table-container">
  <div class="cell cell1">固定宽度单元格1</div>
  <div class="cell cell2">固定宽度单元格2</div>
  <div class="cell cell3">这是一段超长的测试文本，当内容触达右边界时应该自动显示省略号，测试测试测试测试测试测试测试测试测试</div>
  <div class="cell cell4">内容自适应单元格</div>
</div>

CSS样式 #

/* 模拟表格的容器 */
.table-container {
  display: table;
  width: 100%; /* 占满父容器宽度 */
  border-collapse: collapse; /* 可选，消除单元格间隙 */
}

/* 通用单元格样式 */
.cell {
  display: table-cell;
  border: 1px solid #eee; /* 可选，方便查看布局边界 */
  padding: 8px;
}

/* 第一个固定宽度单元格：两端对齐 */
.cell1 {
  width: 100px; /* 固定宽度，可根据需求调整 */
  text-align: justify;
  white-space: nowrap; /* 防止内容撑开宽度 */
  overflow: hidden;
}

/* 第二个固定宽度单元格：两端对齐 */
.cell2 {
  width: 120px; /* 固定宽度，可根据需求调整 */
  text-align: justify;
  white-space: nowrap;
  overflow: hidden;
}

/* 第三个自适应单元格：左对齐+文本省略 */
.cell3 {
  text-align: left;
  width: 100%; /* 抢占剩余所有空间 */
  white-space: nowrap; /* 强制不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

/* 第四个收缩至内容的单元格：右对齐 */
.cell4 {
  text-align: right;
  width: 1%; /* 关键：强制表格让此单元格收缩到内容宽度 */
  white-space: nowrap; /* 防止内容换行撑开宽度 */
}

关键细节说明： #

• 容器设置width:100%确保占满父容器，border-collapse: collapse可选用于消除单元格默认间隙；
• 前两个单元格通过固定width+white-space: nowrap保证宽度不被内容撑开；
• 第三个单元格用width:100%抢占剩余空间，配合文本溢出三属性实现省略效果；
• 第四个单元格的width:1%是table布局的小技巧，结合white-space: nowrap可以让单元格自动收缩到内容所需宽度。

方案二：基于Flex布局实现（更现代的替代方案） #

如果你的项目兼容现代浏览器，flex布局会更直观，代码逻辑也更清晰：

CSS样式（HTML结构和方案一一致） #

.table-container {
  display: flex;
  width: 100%;
  gap: 0; /* 可选，消除子项间隙 */
}

.cell {
  border: 1px solid #eee;
  padding: 8px;
}

.cell1 {
  flex: 0 0 100px; /* 不放大、不缩小，固定宽度100px */
  text-align: justify;
  white-space: nowrap;
  overflow: hidden;
}

.cell2 {
  flex: 0 0 120px; /* 固定宽度120px */
  text-align: justify;
  white-space: nowrap;
  overflow: hidden;
}

.cell3 {
  flex: 1; /* 占满剩余所有空间 */
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* 关键：默认min-width:auto会阻止子项收缩，必须设为0才能触发省略 */
}

.cell4 {
  flex: 0 1 auto; /* 不放大，仅在必要时缩小（实际就是内容宽度） */
  text-align: right;
  white-space: nowrap;
}

关键细节说明： #

• flex:0 0 固定值用来锁定前两个单元格的宽度；
• flex:1让第三个单元格自动填充剩余空间；
• 必须给第三个单元格加min-width:0，否则flex子项默认的min-width:auto会导致文本过长时撑破容器，无法触发省略效果；
• 第四个单元格的flex:0 1 auto确保它只占用内容所需的宽度。

你可以根据项目的浏览器兼容需求选择其中一种方案，两种都能完美满足你的布局要求~

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