Element UI Table列如何根据内容自适应宽度且不换行？

要实现Element UI Table列宽根据内容自动调整且禁止内容换行，可通过CSS配置与组件属性配合完成，具体方案如下：

核心CSS配置 #

首先覆盖Element UI Table的默认布局规则，强制单元格不换行并启用自动列宽计算：

/* 全局或局部作用域内添加 */
.el-table .el-table__cell {
  white-space: nowrap; /* 禁止内容换行 */
  overflow: hidden; /* 超出单元格范围的内容隐藏 */
  text-overflow: ellipsis; /* 可选：内容过长时显示省略号 */
}

/* 修改表格布局为自动列宽（默认是fixed，会按预设宽度分配） */
.el-table__header-wrapper table,
.el-table__body-wrapper table {
  table-layout: auto;
}

列属性辅助配置 #

在<el-table-column>中可通过min-width设置列的最小宽度，避免内容过窄时列宽过小：

<el-table :data="yourTableData" border>
  <el-table-column prop="username" label="用户名" min-width="120"></el-table-column>
  <el-table-column prop="longContent" label="详情"></el-table-column>
  <el-table-column prop="operation" label="操作" min-width="100"></el-table-column>
</el-table>

• 未设置width或min-width的列会完全根据内容自动计算宽度
• min-width可确保列在内容较短时保持合理宽度，内容超出时自动扩展

固定列（fixed）的适配 #

如果表格使用了固定列（fixed="left"或fixed="right"），需单独为固定列添加样式：

.el-table .el-table__fixed .el-table__cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-table__fixed-header-wrapper table,
.el-table__fixed-body-wrapper table {
  table-layout: auto;
}

可选优化：限制表格最大宽度 #

若担心内容过长导致表格过宽，可给表格添加横向滚动：

.el-table {
  max-width: 100%;
  overflow-x: auto;
}

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