根本原因是基线错位：label、input、textarea默认基线位置不同导致视觉错位；最稳解法是td设display:flex+align-items:center，统一控件样式并禁用vertical-align。
表格布局里表单元素对齐不齐，根本原因是基线错位
直接把 <input>、<select></select> 塞进 <td> 里，看似整齐，实际各控件的基线（baseline）位置不同：<code><label></label> 贴文本基线，<input type="text"> 默认按内部文本基线对齐，<textarea></textarea> 又按第一行文本基线算——浏览器渲染时视觉上就“一高一低”。这不是 bug，是 HTML 默认盒模型行为差异导致的。
最稳解法不是调 vertical-align（它在表格单元格里作用有限且难预测），而是统一用 display: flex + align-items: center 控制每行内标签与控件的垂直居中：
- 给每个
<tr> 加 <code>display: table-row（保持表格语义），但给<td> 加 <code>display: flex; align-items: center; gap: 0.5rem; -
<label></label>设min-width: 8em;防止文字长短影响对齐 - 所有表单控件统一设
margin: 0; padding: 0.375rem 0.75rem; box-sizing: border-box; - 禁用
vertical-align，它在 flex 容器里无效，还可能干扰表格行高计算 - 删掉 HTML 中所有
cellpadding/cellspacing属性 - 用
padding直接控制<td> 内部留白，比如 <code>padding: 0.75rem 1rem; - 水平间距交给
gap（flex 布局下）或margin-left（仅对控件） - 若需整行上下留空，给
<tr> 加 <code>margin-bottom不起作用（表格行不支持 margin），应改用<td> 的 <code>padding-bottom移动端表格表单挤成一团？关键在视口和宽度控制
表格在小屏上崩坏，不是因为
<table> 本身，而是 iOS Safari 自动缩放 input、安卓键盘弹出后 <code>vh失效、以及默认width超出视口这三件事叠加。必须加的防护项：
-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">—— 缺一不可 - 所有表单控件（
<input>、<select></select>、<textarea></textarea>）设width: 100%; max-width: 100%; - 禁用自动缩放：
input, select, textarea { -webkit-text-size-adjust: 100%; } -
<textarea></textarea>必须设min-height: 6em;，否则初始高度太小，用户点进去才撑开，体验断裂
表格嵌表单要不要用
<thead> / <code><tbody>？ <p>要，但不是为了样式，是为了可访问性和语义健壮性。屏幕阅读器依赖 <code><thead> 识别表头，再结合 <code>scope或id/for关联，才能把“姓名”这个<th> 正确读给“张三”那行的 <code><input>听。结构示例（注意
scope和for的配对）：姓名 邮箱 真正容易被忽略的是：表格布局一旦用了
<thead>，就必须保证每行 <code><td> 数量与表头列数一致，否则可访问性树会错乱，而且某些旧版读屏软件会直接跳过整行。</td> -
用 <table> 包裹表单时，<code>cellpadding 和 cellspacing 别乱动
老式写法喜欢用 cellpadding="10" 或 cellspacing="2" 控制间距，但它们作用于整个单元格边框与内容、单元格与单元格之间，无法单独控制标签和输入框之间的空隙，还会污染响应式表现。
现代做法是彻底忽略这两个属性，改用 CSS：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
