使用 border-collapse 和 padding 可显著优化表格样式：border-collapse: collapse 能合并边框，消除双线间距；合理设置 padding（如 th 10px 12px，td 8px 12px）提升内容可读性；结合字体、颜色等属性可打造整洁专业的表格。
在网页开发中，表格的样式优化能显著提升数据的可读性和整体美观度。CSS 提供了多种方式来美化表格，其中 border-collapse 和 padding 是两个关键属性。合理使用它们可以让表格边框更紧凑、内容更清晰。
使用 border-collapse 控制边框合并
默认情况下，HTML 表格的单元格边框是分开的，会产生双线效果和额外间距。通过 border-collapse 属性可以解决这个问题。
常用取值：- collapse：将相邻边框合并为一条线，常用于简洁风格的表格
- separate：默认值，边框独立显示
示例代码：
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
}
这样设置后，表格的上下左右边框会自然衔接，视觉上更加整洁。
通过 padding 增强内容可读性
单元格内的文字紧贴边框会影响阅读体验。使用 padding 可以在文本与边框之间增加空白区域。
建议设置合理的内边距，让内容“呼吸”：
- 一般情况下，padding: 8px 12px; 是比较舒适的值
- 若表格信息密集，可适当缩小至 6px～8px
- 标题行（th）可略大于数据单元格（td），突出区分
示例：
th {
padding: 10px 12px;
background-color: #f5f5f5;
}
td {
padding: 8px 12px;
}
结合使用提升整体效果
将 border-collapse 与 padding 结合，再配合简单的颜色和字体设置，就能快速打造专业级表格。
完整示例：
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
基本上就这些。掌握 border-collapse 和 padding 的搭配使用，能让表格从“能看”变成“好看”。不复杂但容易忽略细节，比如边框颜色一致性、内边距对齐等，多试几次就能找到最适合项目风格的配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
