如何用CSS制作底部无边框的表格

根据你要实现的具体场景，这里提供几种常用的解决方案：

1. 去掉整个表格的底部边框 #

如果需要让整个<table>元素的底部边框消失，直接给表格设置border-bottom: none即可。如果之前表格已有边框样式，写法如下：

table {
  border: 1px solid #ccc; /* 基础边框样式，可根据需求调整颜色、粗细 */
  border-bottom: none; /* 移除底部边框 */
}

2. 去掉表格最后一行的底部边框 #

如果表格的每一行都设置了底部边框，想要只移除最后一行的边框，使用CSS的:last-child伪类定位最后一行：

table tr {
  border-bottom: 1px solid #ccc; /* 给每行添加底部边框 */
}

table tr:last-child {
  border-bottom: none; /* 移除最后一行的底部边框 */
}

3. 适配border-collapse: collapse的表格 #

如果表格使用了border-collapse: collapse（边框合并）模式，除了给表格本身设置border-bottom: none，也可以直接移除最后一行单元格的底部边框：

table {
  border-collapse: collapse;
  border: 1px solid #ccc;
}

/* 移除最后一行所有单元格的底部边框 */
table tr:last-child td,
table tr:last-child th {
  border-bottom: none;
}

注意事项 #

• 若设置后未生效，可打开浏览器开发者工具（F12）检查元素样式，确认是否有优先级更高的CSS规则覆盖了当前设置。
• 如果使用了前端框架（如Bootstrap）的表格组件，建议给表格添加自定义类名（比如.no-table-bottom-border），通过类选择器来设置样式，避免框架样式冲突：

table.no-table-bottom-border {
  border-bottom: none;
}

内容的提问来源于stack exchange，提问作者Tisha Shelke