本文介绍如何通过现代 CSS 方法（而非过时的 border="0" 属性）精确控制表格边框，特别是移除底部边框，同时保持其他边框完整，确保语义化与响应式兼容。
本文介绍如何通过现代 css 方法（而非过时的 `border="0"` 属性）精确控制表格边框，特别是移除底部边框，同时保持其他边框完整，确保语义化与响应式兼容。
在网页开发中，常见的需求是创建一个仅有上、左、右三边有边框，而底部无边框的表格——例如用于表单分组、卡片式数据展示或与下方元素无缝衔接的 UI 场景。需要注意：直接使用 HTML 的
| 姓名 | 邮箱 | 状态 |
|---|---|---|
| 张三 | zhang@example.com | 激活 |
| 李四 | li@example.com | 待审核 |
.no-bottom-border {
border-collapse: collapse; /* 关键：避免双线边框，统一边框渲染 */
width: 100%;
}
.no-bottom-border th,
.no-bottom-border td {
padding: 12px 16px;
border: 1px solid #d1d5db; /* 统一设置四边边框 */
}
/* 移除表头最后一行（即 thead > tr）的底部边框 */
.no-bottom-border thead tr:last-child th {
border-bottom: none;
}
/* 或更通用：移除 tbody 第一行的顶部边框（若需与表头无缝衔接） */
.no-bottom-border tbody tr:first-child td {
border-top: none;
}
/* ✅ 推荐：直接为整个表格禁用底边框，但保留内部单元格边框 */
.no-bottom-border {
border-bottom: none;
}
/* 若需仅让表格底部无边框，而内部行线保持完整，则无需额外处理 tbody —— 因为 border-bottom 作用于 table 元素本身，不影响单元格内边框 */
⚠️ 注意事项：
- 不要依赖 border="0"：该属性已从 HTML5 标准中移除，会导致可访问性问题，且无法满足精细化样式需求；
- 使用 border-collapse: collapse 可避免默认 separate 模式下的边框间距和重复边框；
- 若表格使用 display: block 或被包裹在容器中，需确保父容器未意外添加边框；
- 在响应式设计中，建议配合 @media 查询，在小屏下改为无边框或采用阴影替代边框，提升可读性。
总结：移除表格底部边框的本质是精准控制 CSS 边框属性，而非“取消全部边框”。通过 border-bottom: none 作用于 table 或特定 tr/td 元素，配合 border-collapse 和语义化结构，即可优雅、可维护地实现所需效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
