表格单元格间距过大主要因 border-spacing 值过大或未正确设置 border-collapse；应根据需求选择 separate（配 border-spacing）或 collapse（忽略 border-spacing），并检查 padding、line-height、vertical-align 等干扰因素。
表格单元格间距太大，通常是因为 border-spacing 属性值设置过大，或父容器（如 table）默认/继承了较大的间距值。最直接有效的解决方式就是显式设置 border-spacing 为合适的数值，包括设为 0 来消除间隙。
如果表格使用了 border-collapse: collapse，border-spacing 将完全失效——此时单元格之间本就不该有间距。若你同时写了这两者，后者会被忽略。
border-collapse: separate（默认值），再调 border-spacing
border-collapse: collapse，无需管 border-spacing
border-spacing 接受一个或两个长度值：
– 一个值：同时设置水平和垂直间距（如 border-spacing: 4px）
– 两个值：第一个是水平间距，第二个是垂直间距（如 border-spacing: 2px 6px）
border-spacing: 0 彻底去除间隙px 或 em，避免用 %（不支持）table 元素本身，对 td 或 tr 设置无效即使设置了 border-spacing: 0，仍看到“大间隙”，可能是以下原因：
立即学习“前端免费学习笔记（深入）”；
td/th 有 padding：这是最常见“假间距”，减小或清空 padding 即可line-height）过大，让内容撑开单元格：适当调低 line-height
vertical-align: baseline 导致底部留空：改为 vertical-align: top 或 middle
border-spacing 在所有现代浏览器中均支持良好（IE8+），但注意它只对 table 生效，且不能继承。推荐在 CSS 重置或表格初始化时统一处理：
table {
border-collapse: separate;
border-spacing: 0;
}
table td,
table th {
padding: 4px 8px; /* 按需设置，别依赖默认 */
}以上就是css表格单元格间距太大怎么办_调整border-spacing属性的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
706
收藏
取消收藏
