表格布局必须改，因其在非数据场景中存在语义错误、SEO差、响应式难实现及维护成本指数级上升等问题；改用Flex布局可复用现有class仅调CSS，需注意flex属性陷阱与IE兼容策略。
表格布局为什么必须改？
因为 <table> 用在非数据场景时，语义错误、SEO 友好性差、响应式几乎无法实现，且维护成本随嵌套层级指数上升。你改一个 colspan，可能要同步调整三行 <tr> 和五个 <td>；加个新列？整个结构得重算宽度百分比。这不是“能跑就行”，是“改一次就心梗一次”。
如何把旧表格 HTML 快速转成 Flex 布局？
别重写 DOM 结构——直接复用现有 <div> 或 <table> 的 class 名，只改 CSS：
- 把原
<table class="form-layout">的父容器设为display: flex，flex-direction: column - 把每行
<tr>替换成display: flex容器（保留 class，如class="form-row"），再加gap: 8px - 把每个
<td>改成flex: 1或指定min-width，避免文字撑破布局 - 原
align="right"或valign="middle"全部用justify-content和align-items替代
示例：原表格中一行两列的表单项，<tr><td><label>Name:</label></td><td><input></td></tr> → 改为 .form-row { display: flex; align-items: center; gap: 12px; } + label { flex: 0 0 100px; } + input { flex: 1; }
Flex 布局里哪些属性最容易踩坑？
flex: 1 看似省事，但实际是 flex: 1 1 0%，会导致内容为空时子项仍占空间；flex: auto（即 flex: 1 1 auto）才真正按内容伸缩。还有几个关键点：
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap必须显式声明，否则多项目超出容器时会强行压缩，不换行 -
align-items: stretch是默认值，但若子项有height或min-height，会失效——此时用align-items: flex-start更可控 - 嵌套 Flex 容器时，外层
flex-direction: column+ 内层row是安全组合；反过来（外层 row / 内层 column）容易因父容器 width 未设导致内层 collapse
过渡期要不要兼容 IE？
如果项目明确要求支持 IE11，display: flex 必须加厂商前缀：display: -ms-flexbox，且不能用 gap（IE 不支持），改用 margin 模拟间距。但更现实的做法是：用 @supports (display: flex) 区分样式，IE 下 fallback 到 float 布局或最小可用的 table 布局——不是为了“完美”，而是保证核心表单可操作。
真正容易被忽略的是语义残留：删掉 <table><tr><td> 标签后，别忘了移除所有 role="presentation" 或 aria-hidden="true" 这类为表格 hack 加的辅助属性，它们在 Flex 下反而干扰屏幕阅读器。
