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

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

P粉602998670

发布： 2025-12-22 20:42:08

原创

694人浏览过

表格文字挤在一起是因默认border-collapse为collapse，导致border-spacing失效。需设置border-collapse: separate后，再用border-spacing定义间距，如10px 5px分别控制横向和纵向间距；配合td、th的padding提升可读性，使内容更清晰舒适。

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

表格中的文字挤在一起，通常是因为单元格之间没有足够的间距。在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 添加内边距，避免文字紧贴边框：

绘ai

ai绘图提示词免费分享

240

查看详情

立即学习“前端免费学习笔记（深入）”；

td, th {
  padding: 8px 12px;
}

登录后复制

上下留出8px，左右12px，视觉更舒适
尤其适用于内容较多或窄列场景

完整示例

table {
  border-collapse: separate;
  border-spacing: 12px 6px;
  width: 100%;
}
<p>td, th {
padding: 6px 10px;
text-align: left;
}

登录后复制

这样设置后，表格不再拥挤，信息展示更清晰。

基本上就这些。关键点是记得把 border-collapse 改为 separate，然后用 border-spacing 控制间距。不复杂但容易忽略。

以上就是css表格文字挤在一起怎么解决_css表格问题用border-spacing调整间距的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css默认样式的整理 css水平居中元素的宽度探究 css定位叠放次序的使用注意 css标签选择器的使用注意 css中grid网格布局的介绍