表格文字挤在一起是因默认border-collapse为collapse，导致border-spacing失效。需设置border-collapse: separate后，再用border-spacing定义间距，如10px 5px分别控制横向和纵向间距；配合td、th的padding提升可读性，使内容更清晰舒适。
表格中的文字挤在一起，通常是因为单元格之间没有足够的间距。在CSS中，可以通过 border-spacing 属性来有效解决这个问题，让表格看起来更清晰、易读。
为什么文字会挤在一起？
默认情况下，表格的 border-collapse 属性值为 collapse，这意味着单元格边框会合并，且无法使用 border-spacing 设置间距。只有当 border-collapse 设置为 separate 时，border-spacing 才会生效。
使用 border-spacing 调整单元格间距
给表格添加以下CSS样式即可增加单元格之间的距离：
table {
border-collapse: separate;
border-spacing: 10px 5px; /* 水平间距 10px，垂直间距 5px */
}
- 两个值分别表示：横向间距 和 纵向间距
- 如果只写一个值，比如 8px，则横纵间距相同
- 这个属性不会影响边框本身，只控制单元格之间的空白
配合 padding 提升文字可读性
除了调整单元格间距，还可以给 td 或 th 添加内边距，避免文字紧贴边框：
立即学习“前端免费学习笔记（深入）”；
td, th {
padding: 8px 12px;
}
- 上下留出8px，左右12px，视觉更舒适
- 尤其适用于内容较多或窄列场景
完整示例
table {
border-collapse: separate;
border-spacing: 12px 6px;
width: 100%;
}
td, th {
padding: 6px 10px;
text-align: left;
}
这样设置后，表格不再拥挤，信息展示更清晰。
基本上就这些。关键点是记得把 border-collapse 改为 separate，然后用 border-spacing 控制间距。不复杂但容易忽略。
