如何在Flex Box中实现动态宽度下的表格列等宽

要实现你需要的效果，直接对现有代码做以下调整即可：

核心调整逻辑 #

• 固定表格布局并占满容器宽度：让表格能随Flex容器动态缩放，同时列宽由设定比例控制，不受内容长度影响
• 均分列宽：给每个单元格设置均等的宽度占比，保证所有列宽度一致
• 强制文本换行：修改单元格的文本排版属性，让长内容自动换行，维持单元格宽度稳定

修改后的完整代码 #

CSS代码 #

section {
  margin: 3% auto;
}
nav {
  background-color: #0e1d54;
  margin-top: 0.6%;
  padding: 1px 0px;
}
.navbar {
  display: flex;
  flex-direction: row;
  margin: 0% 3%;
  justify-content: center;
}
.navbar table {
  table-layout: fixed;
  width: 100%;
}
.navbar table tr td {
  font-size: 20px;
  width: 25%; /* 4列均分，每列占表格总宽度的25% */
  word-wrap: break-word;
  white-space: normal;
  text-align: center; /* 可选：让导航文本居中，优化视觉效果 */
  padding: 8px 0; /* 可选：增加内边距，提升点击区域舒适度 */
}
.navbar table tr td a {
  color: #fff; /* 可选：适配深色导航栏的文字颜色 */
  text-decoration: none; /* 可选：移除链接下划线 */
}

HTML代码 #

<nav>
  <div class="navbar">
    <table>
      <tr>
        <td><a href="#">Home</a></td>
        <td><a href="#">Family</a></td>
        <td><a href="#">Cape Town</a></td>
        <td><a href="#">Swim</a></td>
        <!-- 后续新增列时，只需调整td的width比例，比如5列就设为20% -->
      </tr>
    </table>
  </div>
</nav>

效果说明 #

• 等列宽：所有单元格宽度始终保持均等，不受内容长度影响
• 动态缩放：Flex容器宽度变化时，表格会同步缩放，列宽按比例自适应
• 文本换行：单元格内的长文本会自动换行，不会撑宽单元格

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