基于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>

三、行合并实现表格

实现思路：在一行中，看你具体要多少列，在每一个列中嵌套一个独立小表格，在嵌套的独立小表格中实现跨行，但是注意，需要合并的行他的高度=单行高 * 合并的行数，这个很重要

代码如下：需要注意的地方已在注释中加入

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table{display: table;width: auto;height: auto;}
        .row{display: table-row;}
        .cell{display: table-cell;}
 
        .sub-table{display: table;}
        .sub-row{display: table-row;width: 200px;height: 100px;}
        .sub-cell{display: table-cell;width: 200px;height: 100px;}
        .sub-row,.sub-cell{border: 1px solid red;}
    </style>
</head>
<body>
    <div class="main">
        <div class="table">
            <div class="table-row">
                <div class="table-cell">
                    <!-- 嵌套小表格 -->
                    <div class="sub-table">
                        <div class="sub-row">
                            <!-- 小表格里面每一列里面再次嵌套一个表格 -->
                            <!-- 第一列 -->
                            <div class="sub-cell">
                                <!-- 下面就是在每个列里嵌套的小表格 -->
                                <div class="sub-table">
                                    <div class="sub-row">
                                        <div class="sub-cell">
                                            1,1
                                        </div>
                                    </div>
                                    <div class="sub-row">
                                        <div class="sub-cell">
                                            1,2
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 第二列 -->
                            <div class="sub-cell">
                                <!-- 第二列里嵌套的小表格 -->
                                <div class="sub-table">
                                    <div class="sub-row">
                                        <!-- 注意这里的高度 -->
                                        <div class="sub-cell" style="height: 200px;">
                                            2,1
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

-- end

posted @ 2023-03-13 22:04 洛小依ovo 阅读(1786) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· mongodb(4)--聚合操作

· mongodb(1)--数据库操作与集合操作

· 举例说明table怎么合并行和列的？

· element-ui 合并行或列 table :span-method（行合并）

公告

昵称：洛小依ovo
园龄： 4年5个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

基于display:table的跨列和跨行显示（列合并及行合并）

一、display:table基本介绍

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

二、列合并实现表格

三、行合并实现表格

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!-- 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>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	.table{display: table;width: auto;height: auto;}
	.row{display: table-row;}
	.cell{display: table-cell;}

	.sub-table{display: table;}
	.sub-row{display: table-row;width: 200px;height: 100px;}
	.sub-cell{display: table-cell;width: 200px;height: 100px;}
	.sub-row,.sub-cell{border: 1px solid red;}
	</style>
	</head>
	<body>
	<div class="main">
	<div class="table">
	<div class="table-row">
	<div class="table-cell">
	<!-- 嵌套小表格 -->
	<div class="sub-table">
	<div class="sub-row">
	<!-- 小表格里面每一列里面再次嵌套一个表格 -->
	<!-- 第一列 -->
	<div class="sub-cell">
	<!-- 下面就是在每个列里嵌套的小表格 -->
	<div class="sub-table">
	<div class="sub-row">
	<div class="sub-cell">
	1,1
	</div>
	</div>
	<div class="sub-row">
	<div class="sub-cell">
	1,2
	</div>
	</div>
	</div>
	</div>
	<!-- 第二列 -->
	<div class="sub-cell">
	<!-- 第二列里嵌套的小表格 -->
	<div class="sub-table">
	<div class="sub-row">
	<!-- 注意这里的高度 -->
	<div class="sub-cell" style="height: 200px;">
	2,1
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>