html表格不能直接实现单选列表，真正实现单选的是radio按钮；带边框的单选列表需用表格包裹radio与文本，并通过css控制边框与对齐，其中border-collapse:collapse必须作用于table元素才能实现单线网格。
HTML表格本身不能直接“制作单选列表”，table只是布局容器；真正实现单选行为的是 input type="radio" 元素。所谓“带边框的单选列表”，本质是用表格结构包裹单选按钮 + 文本，并通过 CSS 控制整体边框与视觉分隔——不是表格自带功能，而是组合实现。
为什么不能只靠 table border 实现单选效果
HTML 的 border 属性（如 border="1"）只能渲染视觉边框，不绑定任何交互逻辑。它不会让 input type="radio" 自动分组、互斥或响应点击。如果你只加了 border 却没设 name，所有选项都能同时被选中，根本不是“单选”。
-
border是纯展示属性，已废弃，无法控制颜色/线型/间距 - 单选依赖
name相同 +type="radio"，和表格无关 - 表格边框若未配合
border-collapse: collapse，容易出现双线、错位或间隙过大
border-collapse: collapse 必须作用于 table 元素
当你给 table、td、th 都写了 border: 1px solid #ccc，默认会显示“双线边框”：表格外框 + 每个单元格内框。要变成干净的单线网格，border-collapse: collapse 必须写在 table 上，且不能写在 td 或 tr 上——否则无效。
- 错误写法：
td { border-collapse: collapse; }→ 不生效 - 正确写法：
table { border-collapse: collapse; } - 如果用了
cellspacing="0"但没加border-collapse，仍可能有 1px 白缝（尤其在旧版 Safari 中）
单选按钮与表格单元格的对齐细节
默认情况下，input type="radio" 垂直对齐位置偏低，和文字不对齐，放进 td 后容易显得“悬浮”或偏下。这不是边框问题，但会影响整体边框内的视觉一致性。
- 加
vertical-align: middle到td或input可修正对齐 - 避免用
padding过大撑开td，否则边框看起来松散；推荐统一用padding: 8px 12px - 若需高亮当前选中行，用
tr:hover或 JS 监听change事件加 class，不要仅靠边框粗细变化——人眼难识别 1px 差异
真正麻烦的不是加边框，而是让边框“稳住不动”：表格内容动态变化、字体缩放、不同浏览器默认盒模型差异，都会让边框轻微错位。最稳妥的方式是固定 table-layout: fixed + 显式设置列宽，而不是依赖内容自适应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
