为table表格设置合并边框

最新推荐文章于 2023-12-19 08:15:00 发布

microcosmv

最新推荐文章于 2023-12-19 08:15:00 发布

阅读量4.4w

点赞数 3

分类专栏： CSS 文章标签： css合并边框表格合并边框

本文链接：https://blog.csdn.net/microcosmv/article/details/52774403

版权

CSS 专栏收录该内容

16 篇文章

订阅专栏

`border-collapse: collapse;`

例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table {
            margin: 0 auto;
            width: 300px;
            border:1px solid red;
        }
        th,td {
            text-align: center;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩表</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>88</td>
            </tr>            <tr>
                <td>1</td>
                <td>李四</td>
                <td>98</td>
            </tr>            <tr>
                <td>3</td>
                <td>王五</td>
                <td>68</td>
            </tr>
        </tbody>
        <tfoot>

        </tfoot>
    </table>
</body>
</html>

效果预览：
这里写图片描述

修改后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table {
            margin: 0 auto;
            width: 300px;
            border:1px solid red;
            border-collapse: collapse;/*关键代码*/
        }
        th,td {
            text-align: center;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩表</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>88</td>
            </tr>            <tr>
                <td>1</td>
                <td>李四</td>
                <td>98</td>
            </tr>            <tr>
                <td>3</td>
                <td>王五</td>
                <td>68</td>
            </tr>
        </tbody>
        <tfoot>

        </tfoot>
    </table>
</body>
</html>

效果预览：
这里写图片描述