為table表格設置合并邊框

2024-04-25 20:30:26

字體：大中小

供稿：網(wǎng)友

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>

效果預覽：

為table表格設置合并邊框

修改后：

<!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;/*關(guān)鍵代碼*/        }        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>

效果預覽：

為table表格設置合并邊框