CSS-如何设置相邻边框合并，设置单元格边框间的间隔，设置空白单元格边框是否显示

在 CSS 中可以通过 border-collapse 样式属性来设置表格的相邻边框是否合并

属性值	作用
separate	默认值，边框会被分开，不会忽略 border-spacing 和 empty-cells 样式属性
collapse	相邻边框会合并成一条单一的边框，边框宽度不变

border-spacing 设置相邻单元格边框间的距离，只在边框未合并的情况下有效

• 属性值有两个，属性值可以是 px（像素）、cm（厘米）等，不允许使用负值
• 如果设置了一个属性值，那么这个属性值设置的是水平和垂直间距
• 如果设置了两个属性值，那么第一个设置水平间距，第二个设置垂直间距

empty-cells 设置是否显示表格中的空单元格（绘制边框），同样只在边框未合并的情况下有效

属性值	作用
hide	不在空单元格周围绘制边框
show	默认值，在空单元格周围绘制边框

table,
tr,
td {
  border: 1px solid gray;
}

<table>
  <tr>
    <td>border-collapse</td>
    <td></td>
    <td>border-collapse</td>
    <td>border-collapse</td>
  </tr>
  <tr>
    <td>border-collapse</td>
    <td>border-collapse</td>
    <td>border-collapse</td>
    <td></td>
  </tr>
</table>

设置边框的间距：

border-spacing: 10px;

空白单元格不显示：

empty-cells: hide;

设置边框合并：

border-collapse: collapse;