border-collapse: collapse 是合并表格边框的必需设置，仅作用于 table 元素；padding 应设在 th/td 上，line-height 比 padding 更关键地影响行高与可读性。
border-collapse 是控制表格边框合并的关键属性
默认情况下，table 的单元格边框是分离的（border-collapse: separate），导致相邻边框重叠、间距不均，看起来像“双线”。要让边框真正合为一条线，必须显式设为 border-collapse: collapse。
- 只对
table元素生效，不能写在td或th上 - 一旦设为
collapse，border-spacing就失效了（会被忽略） - 若同时设置了
th/td的border和table的border，最终显示的是“权重更高”的那条边框（通常取单元格自己的边框）
padding 控制单元格内容与边框的距离
padding 应该加在 th 和 td 上，而不是 table。直接给 table 设 padding 不起作用——它不是块级容器意义上的“内边距”，只是被忽略的声明。
- 推荐统一设置：
th, td { padding: 8px 12px; } - 水平留白建议用
padding-left/padding-right单独调，避免文字紧贴边框 - 如果用了
border-collapse: collapse，又希望表头和内容行有视觉区分，可单独给th加更大的padding-top或padding-bottom
常见错例：边框没生效或出现双线
典型现象是明明写了 border: 1px solid #ccc，但某些边看不见，或者横竖线粗细不一致、错位。这往往是因为：
- 漏写了
border-collapse: collapse，导致单元格边框各自渲染，上下/左右边框堆叠成 2px 粗线 - 只给
table设了border，但没给th/td设，结果只有外框有线，内部无分隔 - 用
outline代替border调试——outline不占布局空间，会掩盖真实边框位置问题 - 浏览器默认样式干扰：部分浏览器会给
table加border-spacing: 2px，需重置
配合 font-size 和 line-height 提升可读性
表格文字挤在一起，光调 padding 不够；真正影响行高的是 line-height，尤其当单元格里有多行文本或图标时。
- 优先设
td, th { line-height: 1.4; }，比单纯拉高padding更稳定 -
font-size建议用rem或em，避免在缩放页面时文字过小难读 - 如果表格列宽由内容撑开，且内容含长单词，记得加
word-break: break-word防止横向溢出
表格样式真正难调的点不在属性本身，而在于多个层级（table / tr / td）的边框、padding、line-height 相互挤压。最容易被忽略的是：你看到的“某条线”，其实可能是上一行 td 的下边框 + 下一行 td 的上边框叠加出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
