用table布局表单时，label和input对齐需每组单独占一行tr，label放第一列td并设width:120px+text-align:right，input放第二列td自动撑满；整个table加border-collapse:collapse；响应式下小屏转block布局堆叠显示。
用 table 布局表单时，label 和 input 怎么对齐才不歪
直接把 label 和 input 放进同一行 td 里，label 会左贴边、input 默认顶着 label 右侧挤，高度常不一致——这是最常见错位源头。
正确做法是：每组表单项单独占一行 tr，用两列 td 分开放 label 和 input，并给 label 列设固定宽度：
-
label放第一列td，加width: 120px;+text-align: right;（右对齐更易读） -
input放第二列td，不设宽，让它自动撑满剩余空间 - 整个
table加border-collapse: collapse;防止默认间距干扰对齐
别用 align="right" 属性——HTML5 已废弃，Chrome/Firefox 渲染不一致，W3C 验证器直接报错。
为什么 table-cell 比 float 更适合老项目兼容
有些项目还跑在 IE11 或旧版 Android WebView 上，display: flex 不支持或行为异常。这时用 display: table-cell 是稳妥替代：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: table; width: 100%; - 每组 label+input 包进一个
div，设display: table-row; -
label容器设display: table-cell; width: 120px; text-align: right; -
input容器设display: table-cell; width: 100%;
注意：不能直接给 label 或 input 元素设 table-cell，必须用包裹容器——否则 input 的默认渲染流会被破坏，出现高度塌陷或光标错位。
colgroup 能不能统一控制 label 列宽度
可以，但只对整列生效，且必须写在 table 开头、thead 或第一行 tr 之前：
- 加
<colgroup><col style="width: 120px;"><col></colgroup> - 这样第一列所有
td（含 label）自动获得 120px 宽，无需重复写 class - 但
col不支持text-align的跨浏览器稳定继承，仍需额外加td:first-child { text-align: right; }
如果表格有动态列数（比如 JS 插入新列），colgroup 会失效——此时必须切回类名 + :nth-child() 方案。
响应式下 table 表单怎么避免文字换行压垮布局
小屏上固定宽度的 label 列会把 input 挤出可视区，不是简单隐藏就能解决的。
关键动作是用媒体查询「降级」布局：
- 当屏幕
max-width: 480px时，给table加display: block; - 给每个
tr加display: block; margin-bottom: 12px; - 把
td全部转成display: block;，label 自然堆叠在 input 上方 - 同时移除 label 列的固定宽，改用
width: 100%;避免溢出
别试图用 table-layout: fixed 强控小屏——它会让内容被截断，且无法触发自动换行，用户根本看不到完整 label 文本。
