在网页开发中，表格是展示结构化数据的常用组件，合理的边框设置能让表格层次更清晰，提升内容可读性。CSS提供了多种属性来控制表格边框的样式、宽度和颜色，不同属性的组合会产生不同的展示效果。
基础表格边框属性
最基础的表格边框设置是通过border属性直接为表格、表头单元格th和表格单元格td添加边框，border是border-width、border-style、border-color的简写属性。
/* 为整个表格添加边框 */
table {
border: 2px solid #333;
}
/* 为表头和单元格添加边框 */
th, td {
border: 1px solid #666;
padding: 8px 12px;
}
这种设置方式下，表格的外边框和单元格的边框会独立存在，默认会出现双边框的效果，单元格之间也会有间隙，这是表格默认的border-spacing属性导致的。
边框合并属性border-collapse
要解决双边框和单元格间隙的问题，需要使用border-collapse属性，它用于控制表格的边框是分开还是合并，有两个可选值：
- separate：默认值，边框分开，单元格之间有间隙
- collapse：边框合并，相邻单元格共享同一条边框，间隙消失
当设置border-collapse: collapse后，只需要为表格或者单元格设置一次边框，就能得到统一的边框效果，不会出现重复边框的问题。
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #e0e0e0;
padding: 10px;
text-align: left;
}
/* 表头单独设置边框颜色 */
th {
border-bottom: 2px solid #1890ff;
background-color: #f5f5f5;
}
不同边框样式的设置
除了实线边框，CSS还支持多种边框样式，通过border-style属性可以设置，常见的样式有：
- solid：实线，最常用
- dashed：虚线
- dotted：点线
- double：双线
可以根据不同的表格场景选择对应的样式，比如数据汇总表格用实线，说明类表格用虚线区分不同模块。
/* 汇总表格使用实线边框 */
.summary-table {
border-collapse: collapse;
}
.summary-table th, .summary-table td {
border: 1px solid #333;
}
/* 说明类表格使用虚线边框 */
.desc-table {
border-collapse: collapse;
}
.desc-table th, .desc-table td {
border: 1px dashed #999;
}
边框圆角设置
如果需要给表格添加圆角效果，需要注意border-collapse: collapse和border-radius不能同时使用，因为合并边框的模式下圆角不会生效，此时需要设置为border-collapse: separate，同时调整border-spacing为0，再给表格添加圆角。
.round-table {
border-collapse: separate;
border-spacing: 0;
border: 2px solid #1890ff;
border-radius: 8px;
overflow: hidden;
}
.round-table th, .round-table td {
border-bottom: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
padding: 10px;
}
/* 最后一列去掉右边框 */
.round-table th:last-child, .round-table td:last-child {
border-right: none;
}
/* 最后一行去掉下边框 */
.round-table tr:last-child td {
border-bottom: none;
}
常见问题及解决
很多开发者会遇到设置了单元格边框但表格外边框不生效的问题，通常是没有给table标签本身设置边框，或者border-collapse属性配置错误。如果是分开边框模式，需要同时设置表格和单元格的边框；如果是合并模式，只需要设置单元格边框即可，表格外边框会自动由单元格边框合并生成。
另外要注意，当表格嵌套时，内层表格的边框会继承外层表格的border-collapse设置，如果需要不同的边框效果，需要单独为内层表格重新设置该属性。
CSS_table_borderborder_collapsetable_border_stylecell_border修改时间：2026-07-03 07:27:10