首页 > 网站 > 建站经验 > 正文

为table表格设置合并边框

2024-04-25 20:30:26
字体:
来源:转载
供稿:网友

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;/*关键代码*/        }        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表格设置合并边框

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表