复杂表格的简单写法css

2023-12-28 18:31:26

?实现效果图：

思路：找最细行

<style>
        table,tr,td,th{
            border:1px solid #333;
            border-collapse: collapse;
        }
        
        /* 第一列的宽度60 */
        .width_1{
            width: 60px;
        }
        /* 第二列宽度58 */
        .width_2{
            width: 60px;
        }
        /* 第三列宽度70 */
        .width_3{
            width: 70px;
        }
        /* 第四列宽度70 */
        .width_4{
            width: 70px;
        }
        /* 第三行和第四行合并 */
        .widthtf{
            width: 140px;
        }
        /* 第五列宽度58 */
        .width_5{
            width: 60px;
        }
        /* 第六列宽度60 */
        .width_6{
            width: 60px;
        }
        /* 第七列宽度60 */
        .width_7{
            width: 60px;
        }
        /* 第八列宽度66 */
        .width_8{
            width: 80px;
        }
        /* 78合并 */
        .widthse{
            width:140px;
        }
       /* 678合并 */
        .widthsse{
            width:200px;
        }
        /* 第一行的高度 */
        .height_1{
            height:35px
        }
        /* 第二行的高度 */
        .height_2{
            height:40px
        }
        .height_3{
            height:60px
        }
        .height_4{
            height:55px
        }
        .height_5{
            height:75px
        }
        .height_6{
            height:33px
        }
        .height_7{
            height: 40px
        }
        .height_8{
            height: 60px
        }
        .height_9{
            height: 90px
        }
    </style>
</head> 
<body>
    <table>
        <!-- 第一行 -->
        <tr class="height_1">
            <th class="width_1" rowspan="2">吃饭</th>
            <th class="width_2">睡觉</th>
            <th class="widthtf" colspan="2">打豆豆</th>
            <!-- <th class="width_4">4</th>  34合并--> 
            <th class="width_5">Md</th>
            <th class="widthsse" colspan="3">total</th>
            <!-- <th class="width_7">7</th>
            <th class="width_8">8</th> 678合并-->
        </tr>
        <!-- 第二行 -->
        <tr class="height_2">
            <!-- <td>1</td>  合并行-->
            <td>2</td>
            <td class="widthtf" colspan="2">34</td>
            <td>5</td>
            <td class="widthsse" colspan="3">678</td>
        </tr>
        <!-- 第三行 -->
        <tr class="height_3">
            <td>吃薯片</td>
            <td>2</td>
            <td colspan="2">数量</td>
            <!-- <td>4</td> -->
            <td>5</td>
            <td class="width_6">地点</td>
            <td class="widthse" colspan="2">78</td>
            <!-- <td>8</td> -->
        </tr>
        <!-- 第四行 -->
        <tr class="height_4">
            <td style="font-size:14px">喝娃哈哈</td>
            <td>2</td>
            <td colspan="2">数量</td>
            <!-- <td>4</td> -->
            <td>5</td>
            <td class="width_6" style="font-size:14px">地点</td>
            <td class="widthse" colspan="2">78</td>
            <!-- <td>8</td> -->
        </tr>
        <!-- 第五行 -->
        <tr class="height_5">
            <td rowspan="4">记录</td>
            <td>2</td>
            <td class="width_3">喝水时间</td>
            <td class="width_4">喝水数量ml</td>
            <td class="width_5">喝水温度</td>
            <td class="width_6">喝水被呛到次数</td>
            <td class="width_7">排便次数</td>
            <td class="width_8">排便时长</td>
        </tr>
        <!-- 第六行 -->
         <tr class="height_6">
            <!-- <td>1</td> -->
            <td>上午</td>
            <td>3</td>
            <td>4</td>
            <td rowspan="2">5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
         </tr>
         <!-- 第七行 -->
         <tr class="height_7">
            <!-- <td>1</td> -->
            <td>下午</td>
            <td>3</td>
            <td>4</td>
            <!-- <td>5</td> 合并行-->
            <td>6</td>
            <td>7</td>
            <td>8</td>
         </tr>
         <!-- 第八行 -->
         <tr class="height_8">
            <!-- <td>1</td> -->
            <td>总记录</td>
            <td colspan="6">345678</td>
            <!-- <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td> -->
         </tr>
         <!-- 第九行 -->
         <tr class="height_9">
            <td>备注</td>
            <td colspan="7">2345678</td>
         </tr>
    </table>
</body>
</html>

文章来源:https://blog.csdn.net/wuqudhen/article/details/135141893
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。