直接设 rules="rows" 不可靠，因 Chrome/Safari 将其解释为“内侧+外侧边框”，导致顶部/底部外框意外出现且竖线未完全隐藏；HTML5 已弃用该属性，应改用 border-collapse: collapse 配合 border-top/border-bottom 精确控制横线，同时清除左右边框。
为什么直接设 rules="rows" 不可靠
很多人试过在 <table rules="rows"> 上直接加这个属性，结果发现 Chrome 和 Safari 里顶部、底部外框也跟着出来了，甚至竖线没完全消失。这不是浏览器 bug，而是 HTML5 规范已明确不推荐 rules 属性后的兼容实现差异——它在现代浏览器里语义模糊，行为不可控。
真正起作用的是 CSS，不是 HTML 属性。必须放弃 rules，转而用 border-collapse: collapse + 精确控制单边边框。
border-bottom + border-top 是最稳的写法
核心思路：只给单元格画上边和下边，左右边全清零。这样横线由相邻行的 border-bottom 和下一行的 border-top 共同构成（合并后为一条），竖线则彻底不存在。
- 给所有
td和th设border-bottom: 1px solid #e0e0e0 - 给第一行（
thead th或tr:first-child td）额外加border-top: 1px solid #e0e0e0 - 必须同时设
table { border-collapse: collapse }，否则上下边框会双倍粗 - 显式清除左右边框：
border-left: none; border-right: none，避免继承干扰
示例片段：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
}
td, th {
border-bottom: 1px solid #e0e0e0;
border-left: none;
border-right: none;
}
thead th,
tr:first-child td {
border-top: 1px solid #e0e0e0;
}
嵌套表格或响应式场景下容易漏掉的点
如果表格里嵌了另一个 <table>，外层的 CSS 不会穿透影响内层。每个表格都得单独加 border-collapse: collapse，且内层单元格的左右边框也要重置。
移动端缩放时，1px 边框可能被渲染成 2px（Retina 屏），建议用 border-bottom: 0.5px solid #e0e0e0 或媒体查询微调。
如果用了 colgroup 或 col 控制列宽，它们不接受边框样式，所有边框控制仍得落在 td/th 上。
用伪类比用 class 更省事
不用给每行加 class="head" 这类冗余标记，直接用伪类更干净：
-
thead th天然就是表头，无需额外 class -
tbody tr:first-child td可替代手动加 class 的首行数据单元格 -
tbody tr:last-child td如果需要底部收尾线，可单独加border-bottom: 2px solid #333
复杂点在于：不同浏览器对 :first-child 在 tbody 里的解析一致，但若表格结构动态生成（比如 Vue/React 渲染），要确认 DOM 中 tbody 确实存在且包裹了所有数据行——否则伪类会失效。
