前端学习（164）:表格扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格扩展</title>
    <style>
    table{
        /* 隐藏空单元 */
        empty-cells: hide;
    /* 单线 */
    border-collapse: collapse;
    }
    table .line{border:50px solid red;border-left: 150px solid blue;position: relative;color: white;}
    table .line em{position: absolute;left: -50px;top: -50px;}
    table .line span{position:absolute;left:-120px;top:-30px;}
    </style>
</head>
<body>
    <table border="1">
        <caption>天气预报</caption>
        <colgroup>
        <col span="2" style="background: red;">
        <col span="2" style="background: yellow;">
        </colgroup>
        <thead>
        <tr>
            <th>
                <div class="line">
                    <em>日期</em>
                    <span>详情</span>
                </div>
            </th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2019年1月1日</td>
            <td>晴天</td>
            <td></td>
        </tr>
        <tr>
                <td>2019年1月1日</td>
                <td>晴天</td>
                <td>出门请带伞</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
</body>
</html>

运行结果

来源：CSDN

作者：你知道歌谣吗？

链接：https://blog.csdn.net/weixin_43392489/article/details/103625310

标签

html表格

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!