边框与间距

border-collapse 与 border-spacing 的影响

概念说明

表格的边框可以通过 border-collapse 控制是否合并， 当使用 border-spacing 时需要设置 border-collapse: separate。

常见坑：border-spacing 在 collapse 模式下会被忽略， 同时单元格的圆角在合并边框模式下不容易表现。 需要卡片式间距时请改用 separate。

  • collapse：边框合并为单线
  • separate：保留单元格间距

基础语法

table {
  border-collapse: collapse;
}

table.spacing {
  border-collapse: separate;
  border-spacing: 8px;
}

演示

边框模型对比
border-collapse: collapse
城市 订单 评分
上海 1,230 4.8
深圳 980 4.6
border-spacing: 8px
城市 订单 评分
上海 1,230 4.8
深圳 980 4.6 
<table class="table-demo">...</table>

<table class="table-demo table-spacing">...</table>