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

傷城~ 2023-06-08 06:14 18阅读 0赞

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

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

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

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

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

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hide</td> 
   <td>不在空单元格周围绘制边框</td> 
  </tr> 
  <tr> 
   <td>show</td> 
   <td>默认值，在空单元格周围绘制边框</td> 
  </tr> 
 </tbody> 
</table>

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>

![在这里插入图片描述][20191016202420896.png]  
设置边框的间距：

border-spacing: 10px;

![在这里插入图片描述][20191016202642717.png]  
空白单元格不显示：

empty-cells: hide;

![在这里插入图片描述][20191016202944500.png]  
设置边框合并：

border-collapse: collapse;

![在这里插入图片描述][20191016202725886.png]

[20191016202420896.png]: /images/20230531/94a76d8a625b4c6d8242d89bf4b3b9e9.png
[20191016202642717.png]: /images/20230531/fad479b2c38448e9a3426f8c50b06623.png
[20191016202944500.png]: /images/20230531/29156691d31f4673aba6fbf3ff676bd5.png
[20191016202725886.png]: /images/20230531/46b9180122b544e596b03dfe3fe282ee.png