如何实现总宽度固定、部分列自适应内容、剩余列自动填充的表格

你要的效果可以通过两种方案实现，都能同时满足总宽度固定300px、首尾列适配内容最小宽度、中间列填充剩余空间+文本溢出省略的需求。 #

方案1：原生table实现（无需修改HTML结构） #

核心是给中间列加max-width: 0，让auto布局下的表格不会被中间列的长文本撑破设定宽度：

table {
  width: 300px;
  border-collapse: collapse;
}
.min-width {
  width: 1px;
  white-space: nowrap;
}
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0; /* 关键配置，限制中间列宽度优先匹配容器剩余空间 */
  width: 100%;
}

HTML部分和你之前用的完全一致，不需要修改。 #

方案2：CSS Grid实现（更灵活易维护） #

如果可以修改标签结构，用Grid布局控制会更直观，不会出现table布局的各种兼容问题：

.grid-table {
  width: 300px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  border: 1px solid #eee;
}
.grid-row {
  display: contents;
}
.grid-cell {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
}
.min-width {
  white-space: nowrap;
}
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

对应HTML结构：

<div class="grid-table">
  <div class="grid-row">
    <div class="grid-cell min-width">1</div>
    <div class="grid-cell ellipsis">Lorem ipsum dolor sit amet consectetur adipiscing elit</div>
    <div class="grid-cell min-width">One</div>
  </div>
  <div class="grid-row">
    <div class="grid-cell min-width">2</div>
    <div class="grid-cell ellipsis">Nulla vitae rhoncus enim quis rhoncus ex</div>
    <div class="grid-cell min-width">Two</div>
  </div>
  <div class="grid-row">
    <div class="grid-cell min-width">3</div>
    <div class="grid-cell ellipsis">Aenean eu tincidunt purus morbi fringilla eu elit non ultrices</div>
    <div class="grid-cell min-width">Three</div>
  </div>
</div>

原问题原因说明 #

• auto表格布局下，表格会优先适配内容总宽度，长文本不换行时会撑破你设定的300px宽度
• fixed表格布局下，列宽按第一行列宽比例分配，不会自动识别内容的实际最小宽度

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