制作表格边框样式

最新推荐文章于 2025-06-22 10:45:00 发布

原创最新推荐文章于 2025-06-22 10:45:00 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了使用CSS的border-collapse属性来简化表格边框显示的方法，以及如何通过单独设置单元格边框达到相同效果，提供了代码示例和注意事项。

1.通过设置border-collapse。

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

可能的值

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

效果展示：