只设border-bottom仍见竖线，是因为未处理默认border-collapse: separate模型及border-spacing，导致td左右边框残留；正确做法是table设collapse、td/th显式设border:none后再单设top/bottom边框。

为什么只设 border-bottom 还是看到竖线？

常见错误是给 td 加了 border-bottom: 1px solid #000，却没处理默认的分离边框模型。浏览器默认用 border-collapse: separate，此时每个 td 的左右边框依然存在（哪怕没显式设置），加上 border-spacing 默认值（通常是 2px），就会漏出细白缝或残留竖线。

rules="rows" 是最简方案，但有兼容限制

HTML 原生属性 rules="rows" 可直接让表格只显示横向分隔线，无需 CSS：

A	B
C	D

它生效的前提是：border-collapse 未被强制设为 separate，且不与 border 属性混用。注意：rules 在部分旧版 IE 中行为不稳定，现代项目中建议优先用 CSS 方案。

CSS 实现：三步必须全做，缺一不可

要稳定控制只显示横边框，必须同时满足：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• table 上设 border-collapse: collapse
• td 和 th 只设 border-top 和 border-bottom，其他方向明确设为 none
• 第一行 th 或 td 额外加 border-top，最后一行加 border-bottom（否则顶部/底部无横线）

示例：

table { border-collapse: collapse; }
td, th { border: none; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
th:first-child, td:first-child { border-top: 1px solid #333; }
th:last-child, td:last-child { border-bottom: 1px solid #333; }

容易被忽略的细节：border-style 和 border-width 必须配对

写 border-left: solid #000 不生效？因为缺少宽度声明。同理，只写 border-top: solid #000 会静默失败——solid 是样式，不是宽度。必须写成 border-top: 1px solid #000 或分开写：

border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;

另外，若父级 table 或 tr 用了 border 简写（如 border: 1px solid #000），会覆盖子元素的单边设置，务必检查层叠顺序。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！