制作表格边框样式

1.通过设置border-collapse。

border-collapse 属性设置表格的边框是否被合并为一个单一的边框。

可能的值

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

案例：

<table border="1">
    <thead>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>工龄</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>23</td>
        <td>男</td>
        <td>2</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>35</td>
        <td>男</td>
        <td>12</td>
    </tr>
    </tbody>
</table>

 

table{
    border-collapse: collapse;
}
td{
    border: 1px solid red;
 }

效果图展示：

2.通过设置每个单元格的左上边框的样式，设置整体表格右下边框的样式。

<table cellspacing="0">
    <thead>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>工龄</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>23</td>
        <td>男</td>
        <td>2</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>35</td>
        <td>男</td>
        <td>12</td>
    </tr>
    </tbody>
</table>

table{
    border-right: 1px solid red;
    border-bottom: 1px solid red;
}
table td{
    border-left: 1px solid red;
    border-top: 1px solid red;
}

注意：

需要给html元素中的border设置cellspacing="0"

效果展示：