border-collapse: collapse 是实现表格清晰连续分隔线的关键，它合并相邻单元格边框、禁用 border-spacing，并需作用于 table 元素；否则会出现冗余间隙、渲染不一致及角落边框丢失等问题。
border-collapse: collapse 为什么是分隔线布局的关键
默认 HTML 表格的单元格之间有空白间隙，看起来像“双线”——那其实是 border-spacing 在起作用，不是真正的分隔线。要让边框真正合并成一条清晰、连续的分隔线，必须用 border-collapse: collapse。不加这句，哪怕写了 border，也会看到冗余空隙和重复边框。
常见错误：只给 <table> 或 <code><td> 单独设 <code>border，却忘了设 border-collapse，结果在 Chrome 和 Firefox 中表现不一致，移动端尤其容易错位。
- 必须作用于
<table> 元素，对 <code><tr> 或 <code><th> 单独设置无效 <li>值只能是 <code>collapse（合并）或separate（分离），没有inherit等中间态 - 一旦设为
collapse，border-spacing就失效，别再试图用它调间距 - 表头和数据单元格边框颜色不同？可以分别写
th { border-bottom: 2px solid #333; }和td { border-bottom: 1px solid #eee; } - 注意：IE8 及更早版本不支持
border-collapse的部分取值，但现代项目基本可忽略
怎么用 border 属性控制分隔线粗细和颜色
分隔线本质就是单元格边框。在 border-collapse: collapse 下，相邻单元格的边框会自动“择优合并”：取宽度最大者，颜色按渲染顺序覆盖（后声明的优先）。所以控制分隔线，核心是统一设置 <td> 和 <code><th> 的 <code>border，而不是只设 <table> 边框。
<p>典型写法：</p>
<pre class="brush:php;toolbar:false;">table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
padding: 8px;
}</pre>
<ul>
<li>如果只要横向分隔线，就只设 <code>border-bottom；只要纵向，就只设 border-right
避免 border-collapse 带来的“边框重叠丢失”问题
启用 collapse 后，四个角上的边框可能“消失”或变细——这是因为角落处多个边框交汇，浏览器按规则合并时可能舍弃部分样式。最常见的是左上角 <th> 的左、上边框没显示出来。
<p>解决方法不是加 hack，而是主动定义角落单元格的完整边框：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a>
<p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;">th:first-child {
border-left: 1px solid #333;
}
th:last-child {
border-right: 1px solid #333;
}
tr:first-child th {
border-top: 2px solid #333;
}
tr:last-child td {
border-bottom: 2px solid #333;
}</pre>
<ul><li>不要依赖 <code><table> 的 <code>border 来“兜底”，它只画外框，管不了内部线条
table-layout: fixed，边框合并行为更稳定，推荐配合使用border-top-width 是否为 0px，那是被合并掉的信号响应式表格里分隔线怎么不被撑断
当表格在小屏上横向滚动时，如果边框太粗或 padding 太大，分隔线容易断裂、错位，甚至出现半像素模糊。这不是 bug，是 sub-pixel 渲染 + overflow-x 导致的视觉割裂。
- 优先用
thin/medium/thick替代具体像素值，比如border: medium solid #ddd，浏览器会做适配 - 给
<table> 加 <code>min-width: max-content，防止内容压缩导致边框挤压变形 - 移动端慎用
border-radius，圆角会和collapse冲突，导致角落边框截断 - 如果必须圆角，改用
overflow: hidden包裹表格，再给容器设border-radius，但内部边框仍保持直角
分隔线不是画上去的装饰，它是边框合并的结果。理解这一点，比记住几行 CSS 更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
