前端随记 - element-ui 实现table行合并与基础 table 合并

最新推荐文章于 2023-11-20 17:59:23 发布

深海大大

最新推荐文章于 2023-11-20 17:59:23 发布

阅读量618

点赞数

分类专栏：前端随记文章标签： vue

本文链接：https://blog.csdn.net/qq_44787943/article/details/117717652

版权

（一）基础 table 合并

代码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>

<div id="root">
    <table border="1" width="400">
        <tr>
            <td>养护类型</td>
            <td>具体养护项目</td>
            <td>处理方法</td>
        </tr>
        
        <tr>
            <td rowspan="4">树体保护措施</td>
            <td rowspan="2">支撑</td>
            <td>新增</td>
        </tr>
        <tr>
            <td>调整</td>
        </tr>
        <tr>
            <td rowspan="2">拉纤</td>
            <td>新增</td>
        </tr>
        <tr>
            <td>调整</td>
        </tr>


        <tr>
            <td rowspan="4">病虫害防治</td>
            <td rowspan="2">化学防治</td>
            <td>乐思本</td>
        </tr>
        <tr>
            <td>杀菌剂</td>
        </tr>
        <tr>
            <td rowspan="2">物理防治</td>
            <td>捕食螨</td>
        </tr>
        <tr>
            <td>蒲幔</td>
        </tr>

        <tr>
            <td rowspan="6">日常养护管理</td>
            <td rowspan="1">浇水</td>
            <td></td>
        </tr>

        <tr>
            <td rowspan="1">调整树牌</td>
            <td></td>
        </tr>


        <tr>
            <td rowspan="1">除草</td>
            <td></td>
        </tr>

    </table>
</div>

</body>

</html>

效果：
在这里插入图片描述
分析：

rowspan：用于行合并
colspan：用于列合并

在这里插入图片描述

树体保护措施占 4 行
支撑和拉纤占 2 行
新增，调整占 1 行

因此，结构为 4 2 2 1 1 1 1。

注意，虽然树体保护措施虽然占了 4 行，但是实际上想的时候，仍然是第一行第一列的 td。只是往它这一列向下扩充了 3 行。支撑同理

所以，

<td rowspan="4">树体保护措施</td>

最低0.47元/天解锁文章

深海大大

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
前端随记 - element-ui 实现table行合并与基础 table 合并

（一）基础 table 合并代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head><body><div id="root"> <table border="1" width="400"> <tr&gt
复制链接

扫一扫