css表格文字挤在一起怎么解决_css表格问题用border-spacing调整间距

表格文字挤在一起是因默认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 控制间距。不复杂但容易忽略。