border-bottom 不能直接作用于 <tr> 实现行间分隔，因 <tr> 不渲染边框；须作用于 <td>/<th>，配合 border-collapse: separate 和 padding 才能精准控制分隔效果。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

border-bottom 能不能直接用在

上实现底部分隔

不能直接生效。给 <table> 元素设置 border-bottom，只会画一条横线在表格最外层底部——但它不参与单元格对齐，也不影响内部行与行之间的视觉分隔。真正要控制“行与行之间”的底部分隔，必须作用于 <tr> 或更细粒度的 <td>/<th>。

给

加 border-bottom 为什么经常失效

因为 <tr> 是非替换元素，本身不渲染边框；浏览器会忽略直接写在 tr 上的 border-bottom（即使 DevTools 显示样式已应用）。实际生效的是它内部所有 td 和 th 的边框叠加效果。

• 正确做法：给 tr td、tr th 统一加 border-bottom
• 注意 border-collapse: collapse 会合并相邻边框，此时 tr 的下边框会被下一行的上边框覆盖或抵消
• 若想保留清晰分隔线，建议用 border-collapse: separate，并设 border-spacing: 0

如何用 border-bottom 实现「仅最后一行无底边」的分隔效果

这是常见需求：每行下面都有一条线，但最后一行不要。靠伪类最可靠，避免 JS 操作或额外 class。

• 给所有 td 和 th 加 border-bottom: 1px solid #ddd
• 用 tr:last-child td, tr:last-child th { border-bottom: none; } 清除最后一行
• 如果表格有表头 <thead>，且只希望 <tbody> 行间分隔，就写 tbody tr:not(:last-child) td
• 注意：IE8 不支持 :not()，如需兼容，改用 tbody tr + tr td（即从第二行开始加边框）

border-bottom 配合 padding 实现呼吸感的分隔线

纯边框紧贴文字容易显得拥挤。加一点垂直空间能提升可读性，但别用 margin（td 不认 margin），得靠 padding。

立即学习“前端免费学习笔记（深入）”；

• 给 td 和 th 设置 padding: 8px 12px，再加 border-bottom
• 如果希望分隔线离文字更远，可加大 padding-bottom，比如 padding: 8px 12px 16px
• 注意：当 border-collapse: collapse 时，padding 不会影响边框间距，只撑开单元格内容区域
• 若用了 border-collapse: separate，还需确认 border-spacing 是否为 0，否则会出现双间隙

实际中最容易被忽略的是 border-collapse 的隐式行为——它默认是 separate，但很多人复制粘贴了别人带 collapse 的 CSS 却没意识到这会让 border-bottom 和 border-top 相互吞掉。调样式前先看一眼 computed 样式里的 border-collapse 值。