当前位置:主页 > 建站教程 > 建站技术 >

为table表格设置合并边框

发布时间:2018-03-06 来源:互联网 浏览: 关键词:table 合并边框 

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>

效果预览: 

魔酷阁-专业织梦模板下载平台,转载请注明出处:https://www.mokuge.com/webdesign/1789.html
责任编辑:mokuge

相关文章

    共有人阅读,期待你的评论!评论
    骚年说点什么吧
    • 全部评论(0
      还没有评论,快来抢沙发吧!
    Top