根据 display:table 跨列和跨行显示（列合并和行合并）

一、display:table基本介绍

--暂不介绍--以后再写

-- 这种方法可能有点复杂，看完之后在使用

-- 也是借鉴的一个大佬，叫做MysomeDay

二、列合并实现表格

我们想要实现如下效果：籍贯那一列的跨列显示

实现思路：因为display没有像table的colspan和rowspan单元格合并的实现，将表格每行中嵌套一个独立的小表格，在独立的小表格中控制行的宽度即可

<!-- table是大表格，sub是小表格 -->
        <div class="table">
            <div class="row">
                <div class="cell">
                    <div class="sub-table">
                        <div class="sub-row">
                            <div class="sub-cell" style="width: 30%;">
                                姓名
                            </div>
                            <div class="sub-cell" style="width: 30%;">
                                手机号
                            </div>
                            <div class="sub-cell" style="width: 40%;">
                                联系地址
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="cell">
                    <div class="sub-table">
                        <div class="sub-row">
                            <div class="sub-cell" style="width: 30%;">
                                备注
                            </div>
                            <div class="sub-cell" style="width: 70%;">
                                籍贯
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!-- 样式 -->
<style>
    .table{display: table;
        text-align: left;line-height: 50px;
        width: auto;border-collapse: collapse;}
    .row{display: table-row;height: 50px;}
    .cell{display: table-cell;width: 200px;padding-left: 10px;}
    .table,.row,.cell{border: 1px solid black;padding: 0;}
    .sub-table,.sub-row,.sub-cell{border: 1px solid black;width: 100%;}
    .sub-table{display: table;}
    .sub-row{display: table-row;}
    .sub-cell{display: table-cell;}
</style>

三、行合并实现表格

--明天再写  但是应该差不多 

原文地址：https://www.cnblogs.com/hyy-0/p/17213124.html