css中table表格th td间的间距是什么CSS样式

在 CSS 中，控制表格的 <th>（表头单元格）和 <td>（数据单元格）之间的间距主要涉及以下几个属性：

1. border-spacing - 用于设置相邻单元格边框之间的距离（仅在 border-collapse: separate 时有效）

   table {
     border-collapse: separate; /* 默认值 */
     border-spacing: 10px; /* 水平和垂直间距都是10px */
     /* 也可以分别设置水平和垂直间距 */
     border-spacing: 10px 20px; /* 水平10px，垂直20px */
   }

2. padding - 用于设置单元格内容与边框之间的内边距（单元格内部的间距）

   th, td {
     padding: 8px 12px; /* 上下内边距8px，左右内边距12px */
   }

3. border-collapse - 控制表格边框的合并方式，会影响间距表现：

   • border-collapse: collapse：边框合并，border-spacing 失效
   • border-collapse: separate：边框分离，border-spacing 生效（默认值）

通常推荐的表格样式组合：

table {
  border-collapse: collapse; /* 合并边框，避免双重边框 */
  width: 100%;
}

th, td {
  padding: 10px 15px; /* 单元格内边距，控制内容与边框的距离 */
  border: 1px solid #ddd; /* 单元格边框 */
}

这种组合既能保证单元格有适当的内部间距（通过 padding），又能避免边框之间出现不必要的空隙。如果需要单元格之间有明确的间隔，可以使用 border-collapse: separate 配合 border-spacing。

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1335.html

转载时须注明出处及本声明