用CSS设置表格Table的细边框的比较好用的方法

设置表格Table的细边框是CSS样式表中经常使用的基本技能。下面是一些可以帮助您轻松设置表格边框的方法。

使用border-collapse属性设置表格边框

在CSS中使用这个属性可以设置表格单元格之间的边界线是否合并。使用border-collapse: collapse属性可以将相邻单元格的边框合并为一条，这样不仅精简代码，还能让表格更美观。

table {
  border-collapse: collapse;
}

使用border属性设置表格边框

border属性用于一次性设置表格的四条边框以及边框的粗细、颜色、样式。可以使用下面的代码将表格边框设置为细边框：

table {
  border: 1px solid black;
}

其中，1px指定了边框宽度，solid则是边框样式，black是边框颜色。

示例说明

以下是两个示例，在这些示例中，表格使用不同的方法设置了细边框。

示例1

HTML代码：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>22</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>23</td>
    <td>女</td>
  </tr>
</table>

CSS代码：

table {
  border-collapse: collapse;
}
table th, td {
  border: 1px solid black;
}

效果：示例1演示

示例2

HTML代码：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>22</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>23</td>
    <td>女</td>
  </tr>
</table>

CSS代码：

table {
  border-collapse: collapse;
  border: none;
}

效果：示例2演示

总结

以上就是使用CSS设置表格Table的细边框的方法，其中border-collapse属性主要用于合并单元格边框，border属性则主要用于设置表格的边框线条样式。可以根据不同需求选择不同的方法。