如何让100%宽度表格的<td>内元素水平均匀分布？

安全阿岳

2026-7-19

解决表格单元格内元素水平均匀分布的问题

你需要让表格第一列<td>内的<span>元素水平均匀分布，之前的代码问题出在flex布局的应用位置和属性写法上，以下是修复后的方案：

错误点说明

你把flex布局加在了<tr>上，但我们需要的是单元格内部的元素排列，应该给目标<td>设置flex。
.spaceBetween类的display属性写法错误：space-between是justify-content的属性值，不是display的值，正确逻辑是先设置display: flex，再配置justify-content控制间距。

正确代码示例

CSS 代码

/* 确保span是块级元素，方便分配空间 */
td span {
  display: inline-block;
}

/* 给需要均匀分布的单元格设置flex布局（元素两侧及中间留白） */
.cell-space-around {
  display: flex;
  justify-content: space-around;
  width: 100%; /* 确保单元格占满可用宽度 */
}

/* 可选：元素仅中间留白、两端对齐的样式 */
.cell-space-between {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

HTML 代码

<table border="1" style="text-align:center;width:100%;">
  <tr><td class="cell-space-around"><span>a</span></td><td>1</td></tr>
  <tr><td class="cell-space-around"><span>a</span><span>a</span></td><td>1</td></tr>
  <tr><td class="cell-space-around"><span>a</span><span>a</span><span>a</span></td><td>1</td></tr>
  <tr><td class="cell-space-around"><span>a</span><span>a</span><span>a</span><span>a</span></td><td>1</td></tr>  
</table>