hi，朋友，您来啦。带上小板凳，我们一起瞅一瞅今天的话题。

前言

如今web布局的方式多种多样，如：table布局、float布局、position布局，flex布局、grid布局等等。研究过可视化布局的朋友，已经用上了新的布局方式，除了IE，手机和PC兼容性还不错，您知道是什么吗？

继续回到我们的话题，如何使用Table元素展示分组数据？

rowspan方法

这是最直接的方法，而且不论码龄、不论前后端都会使用的方式。

<table>
    <thead>
        <tr>
            <th style="text-align:center;width:80px;">-</th>
            <th style="text-align:center;width:80px;">标识</th>
            <th style="text-align:center;width:80px;">类型</th>
            <th style="text-align:center;width:200px;">名称</th>
            <th style="text-align:center;width:auto;">备注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">1</td>
            <td style="text-align:center;" rowspan="3">
                家电
            </td>
            <td style="text-align:center;">冰箱</td>
            <td></td>
        </tr>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">2</td>
            <!-- <td style="text-align:center;">家电</td> -->
            <td style="text-align:center;">洗衣机</td>
            <td></td>
        </tr>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">3</td>
            <td style="text-align:center;display:none;">家电</td>
            <td style="text-align:center;">空调</td>
            <td></td>
        </tr>
    </tbody>
</table>

但这种方式有一些不好的地方：
1、不利于编码：当多个单元格进行跨行时，可能一时分不清，到底哪些单元格在哪一列。

2、不利于生成：当通过javascript脚本，根据数据动态生成跨行属性的值时，可能因为算法等问题，导致数据可能遇到显示错行的情况。

3、代码复杂度：当通过表格进行某些操作时，可能无法准确获取某一行的数据，比如：合计、导出、数据修改等。如果提前准备优化过的分组数据，这增加了代码复杂度，完全没必要。

4、可视化编辑：当通过可视化工具操作时，合并拆分代码太复杂，非常容易出错。

5、不利于阅读：当您的用户使用屏幕阅读器进行浏览时，可能会给他造成困惑。

6、不利于SEO：搜索引擎爬虫，在解析含有rowspan布局的表格时，可能遇到困难，无法准确获取相关信息。

7、不利于数据更新：当需要根据数据，动态去更新表格时，可能需要重新渲染整个表格，或者局部更新数据时，导致更新错误，同时增加代码复杂度。

8、难以实现条件格式化：在对表格进行条件格式化时（如调整颜色、背景、字体等），含有rowspan的单元格，可能使这一编码过程变得复杂。

9、排序筛选复杂化：排序或筛选时，您可能无法准确获取对应列的相关信息。

这么多缺点，难道就不能使用表格了吗？没有其他解决方法了吗？

其实要解决这些问题，也比较简单，大道至简，嵌套一层就可以了。

嵌套一层方法

在需要跨行的单元格，嵌套一层div或span等，然后设置要跨行的行数，也就是高度，然后就可以了，是不是很简单？

CSS

table{border-collapse:collapse;width:100%;}
table,
th,td{border:1px solid #dddddd;}
th,td{height:28px;padding:0 6px;}
.cell-container {
    position: relative;
}
.cell-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

HTML

<table border="1">
    <thead>
        <tr>
            <th style="text-align: center; width: 29px;">-</th>
            <th style="text-align:center;width:80px;">标识</th>
            <th style="text-align:center;width:80px;">类型</th>
            <th style="text-align:center;width:200px;">名称</th>
            <th style="text-align:center;width:auto;">备注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">1</td>
            <td style="text-align:center;" class="cell-container">
                <div class="cell-content" 
                         style="height: calc(28px * 3);display: flex;place-content: center;background-color: rgb(255, 255, 255);align-items: center;">家电</div>
            </td>
            <td style="text-align:center;">冰箱</td>
            <td></td>
        </tr>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">2</td>
            <td style="text-align:center;">家电</td>
            <td style="text-align:center;">洗衣机</td>
            <td></td>
        </tr>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">3</td>
            <td style="text-align:center;">家电</td>
            <td style="text-align:center;">空调</td>
            <td></td>
        </tr>
    </tbody>
</table>

关注作者：关注有趣的编程。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，让我们一起加油吧。