fieldset不能直接作为table的子元素，因html规范禁止其作为table、tr、td等的直接子元素，浏览器会将其移出表格导致语义断裂、disabled失效、屏幕阅读器无法识别分组。
fieldset 不能直接作为 table 的子元素（如直接放在 tr 或 td 里），浏览器会自动修正 DOM，导致语义断裂、disabled 失效、屏幕阅读器无法识别分组。
为什么 fieldset 不能塞进 table 的 td 里
HTML 规范禁止 fieldset 作为 table、tr、td 等表格元素的**直接子元素**。浏览器解析时会把它“踢”到表格外部（常见于 body 末尾），造成：
-
legend脱离原位置，视觉和语义都错位 -
fieldset disabled对内部控件完全不生效 - 键盘 Tab 焦点流跳过该组，读屏器播报为孤立控件
正确做法：用 div 包一层再套 fieldset
必须在 td 内先用 div（或其他流式容器）包裹 fieldset，确保 DOM 层级合法：
|
|
-
div是中性容器，不干扰语义，也不阻断disabled传递 -
fieldset仍能正常渲染边框、播报legend、批量禁用 - 若需对齐或样式控制，CSS 作用于
div即可，不要动fieldset的 display
表格中多组单选/复选时，name 和 fieldset 必须匹配
同一逻辑组内的 input[type="radio"] 必须共用 name，且全部位于同一个 fieldset 下，否则无法实现互斥行为：
- 错误：
<input name="size_a">和<input name="size_b">分属不同fieldset→ 变成两个独立单选组 - 正确：
<input name="size">全部在同一个fieldset内 → 浏览器自动互斥 -
fieldset不影响name作用域，它只强化语义和行为边界
UI 框架里容易被吃掉的 fieldset
React/Vue 组件库（如 Ant Design、Element Plus）常把传入的 HTML 标签做标准化处理，fieldset 和 legend 极可能被剥离或替换为 div + aria-label：
- 上线前务必用浏览器开发者工具检查真实 DOM，确认
fieldset和legend是否还存在 - 若被移除，需改用框架提供的表单分组 API（如
Form.Item的label+help），但注意其不支持原生disabled批量控制 - 服务端渲染（SSR）模板中，条件渲染字段组时，
fieldset开闭标签必须成对出现，漏写一个就会让整个表格结构错乱
最易忽略的一点：表格内嵌 fieldset 后，legend 默认渲染在左上角边框上，会和表格单元格边框重叠。别直接删 border，而是用 fieldset { border: 1px solid #ddd; } 显式定义，并配合 legend { padding: 0 4px; } 微调文字位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
