为table的tr设置flex-direction: row属性后无法正常生效

给table > tr添加display: flex和flex-direction: row后，子元素td没能按预期占满tr的100%宽度并横向均匀排列，核心原因是表格元素自带原生布局规则，与flex布局存在冲突，且td默认不会自动填充flex容器的剩余空间。以下是可行的解决步骤：

• 重置表格默认布局：给table设置display: block和width: 100%，打破表格的原生布局限制，让tr的flex布局能正常生效
• 确保tr作为flex容器占满宽度：给tr设置width: 100%，保证它能撑满父元素table的宽度
• 让td自动分配空间：给td添加flex: 1，这样每个单元格会平分tr的可用宽度；如果需要某列更宽，可调整flex值（比如某列设flex: 2，其他设flex:1）

示例代码 #

HTML

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

CSS

table {
  display: block;
  width: 100%;
  border-collapse: collapse;
}

tr {
  display: flex;
  width: 100%;
}

td {
  flex: 1;
  border: 1px solid #000;
  text-align: center;
  padding: 8px;
}

这样设置后，td就会横向排列并占满tr的全部宽度，实现你想要的效果。

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