CSS 之 table 表格布局

一、简介

​ 除了使用HTML的<table>元素外，我们还可以通过display: table/inline-table; 设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中<table>系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。

​ 该属性只是实现了<table>的布局效果，对于浏览器本身来说两者并不等同。如果使用该属性则不符合标签语义化，也不利于SEO，但优点在于代码相对于<table>的嵌套简洁很多，并且<table>只能在表格内容完全加载后才显示，该属性利用的是普通元素，是逐行进行解析显示的，无需等待全部内容加载完成。

浏览器兼容性：

在这里插入图片描述

二、系列属性

1、table系列display属性值
  • table：设置元素为块级表格元素，类似于HTML的<table>。
  • inline-table：设置元素为行内块表格元素，类似于HTML的<table>。
  • table-row：设置元素为表格的行，类似于HTML的<tr>。
  • table-cell：设置元素为表格的单元格，类似于HTML的<td>、<th>。
  • table-header-group：设置元素为表格的表头行，类似于HTML的<thead>。
  • table-footer-group：设置元素为表格的表尾行，类似于HTML的<tfoot>。
  • table-row-group：设置元素为表格的主体内容，类似于HTML的<tbody>。
  • table-column：设置元素为表格的列，类似于HTML的<col>。
  • table-column-group：设置元素为表格的列组，类似于HTML的<colgroup>。
  • table-caption：设置元素为表格的标题，类似于HTML的<caption>。
所有案例都以下面dom结构为基础：
<div class="table"><div class="row row1"><div class="cell cell1">张三</div><div class="cell cell2">李四</div><div class="cell cell3">王五</div></div><div class="row row2"><div class="cell cell1">张三三</div><div class="cell cell2">李四四</div><div class="cell cell3">王五五</div></div>
</div>
2、display: table;

​ 该属性用于创建一个块级的表格元素，类似于HTML的<table>，可以正常使用padding、margin属性，如果未给元素设置宽高，则元素的宽高将取决于内容的宽高。

​ 单独为某个元素设置该属性是无效的，需要与table-row、table-cell等属性结合使用，才能实现表格布局效果。

.table {display: table;padding: 50px;margin: 40px;background: pink;
}
页面效果：

在这里插入图片描述

3、display: inline-table;

​ 该属性用于创建一个行内块的表格元素，类似于HTML的<table>，但是可与其他行内、行内块元素位于一行，如果未给元素设置宽高，则元素的宽高将取决于内容的宽高。

​ 单独为某个元素设置该属性是无效的（行内块的特性是有效的），至少需要与table-row、table-cell属性结合使用，才能实现表格布局效果。

<style>
.table {display: inline-table;padding: 50px;margin: 40px;background: pink;
}
</style><div class="table">...
</div>
<div style="display: inline-block;background: #ccc;">这是table下面的一个行内块元素
</div>
页面效果：

在这里插入图片描述

4、display: table-row;

​ 该属性用于设置元素为表格布局的行，类似于HTML的<tr>，内部包裹设置display: table-cell;的元素，并必须位于设置display: table/inline-table;的元素内部。

​ 设置该属性的元素，设置padding和margin是无效的，不会影响内容布局。同时元素设置border属性也是无效的。

​ 单独为某个元素设置该属性是无任何效果的，至少需要与table/inline-table、table-cell属性结合使用，才能实现表格布局效果。

5、display: table-cell;

​ 该属性用于设置元素为表格的单元格，类似于HTML的<td>、<th>，被设置display: table-row;的元素包裹，成为一个单元格，且位于设置display: table/inline-table;的元素内部。

​ 设置该属性的元素，设置padding和border有效的，但设置margin无效。

​ 单独为某个元素设置该属性是无任何效果的，至少需要与table/inline-table、table-row属性结合使用，才能实现表格布局效果。

.table {display: table;padding: 50px;margin: 40px;background: pink;
}
.row {display: table-row;padding: 5px;margin: 5px;border: 1px solid red;
}
.cell {display: table-cell;padding: 10px;margin: 10px;border: 1px solid #cccccc;
}
页面效果：

在这里插入图片描述

6、display: table-header-group;
7、display: table-footer-group;
8、display: table-row-group;

​ display: table-header-group;属性用于设置元素为表格的表头行，类似于HTML的<thead>，内部可以包含多个设置display: table-row;的元素和其他普通元素。

​ display: table-footer-group;属性用于设置元素为表格的表尾行，类似于HTML的<tfoot>，内部可以包含多个设置display: table-row;的元素和其他普通元素。

​ display: table-header-group;属性用于设置元素为表格的主体内容组，类似于HTML的<tbody>，内部可以包含多个设置display: table-row;的元素和其他普通元素。

​ 设置这些属性的元素，设置float、margin、padding和width是无效的，并且元素的width自适应于内容的宽度。如果设置元素的height大于元素内容的高度，则实际高度为设置的height，反之设置元素的height小于元素内容的高度，则实际高度为内容的高度。

​ 个人感觉这三个属性，更多是为了方便元素分组，增加代码可读性，实际意义不大。

<style>
.table {display: table;background: pink;
}
.row {display: table-row;
}
.cell {display: table-cell;border: 1px solid #cccccc;
}
.header-group {display: table-header-group;width: 200px;height: 10px;margin-left: 50px;padding: 10px;
}
.body-group {display: table-row-group;width: 200px;height: 100px;margin-left: 50px;padding: 10px;
}
.footer-group {display: table-footer-group;width: 200px;height: 10px;margin-left: 50px;padding: 10px;
}
</style><div class="table"><div class="header-group"><div class="row row1"><div class="cell cell1">header张三</div><div class="cell cell2">header李四</div><div class="cell cell3">header王五</div></div><div class="row row1"><div class="cell cell1">header张三</div><div class="cell cell2">header李四</div><div class="cell cell3">header王五</div></div><span>111111</span></div><div class="body-group"><div class="row row2"><div class="cell cell1">body张三三</div><div class="cell cell2">body李四四</div><div class="cell cell3">body王五五</div></div><span>222222</span></div><div class="footer-group"><div class="row row2"><div class="cell cell1">footer张三三三</div><div class="cell cell2">footer李四四四</div><div class="cell cell3">footer王五五五</div></div><span>333333</span></div>
</div>
页面效果：

在这里插入图片描述

9、display: table-column;
10、display: table-column-group;

​ display: table-column;属性用于设置元素为表格的列，类似于HTML的<col>，属于一个抽象的概念，并不需要写在具体的单元格上，而是写到一个单独的元素上，按照先后顺序对应表格中单元格组成的列，必须位于设置display: table-column-group;的元素内部。

​ display: table-column-group;属性用于设置元素为表格的列组，类似于HTML的<colgroup>，内部包含多个设置display: table-column;的元素，表示一组列。

​ 设置这俩属性的元素，设置float、margin、padding和height是无效的，width和background等属性有效，因此通常用来实现对某些列的单元格进行特殊样式操作。

<style>
.table {display: table;background: pink;
}
.row {display: table-row;
}
.cell {display: table-cell;border: 1px solid #cccccc;
}
.column {display: table-column;width: 100px;height: 50px;margin-left: 50px;padding: 10px;
}
.column:nth-child(2) {background: yellow;
}
.column-group {display: table-column-group;width: 100px;height: 50px;margin-left: 50px;padding: 10px;
}
</style><div class="table"><div class="column-group"><!-- 三个列元素 对应 每行的三个单元格 --><div class="column"></div><div class="column"></div><div class="column"></div></div><div class="row row1"><div class="cell">张三</div><div class="cell cell2">李四</div><div class="cell cell3">王五</div></div><div class="row row2"><div class="cell cell1">张三三</div><div class="cell cell2">李四四</div><div class="cell cell3">王五五五</div></div>
</div>
页面效果：

在这里插入图片描述

11、display: table-caption;

​ 该属性用于设置元素为表格的标题模块，类似于HTML的<caption>，同时可以结合caption-side属性实现标题模块相对于表格区域的定位。

<style>
.table {display: table;background: pink;
}
.row {display: table-row;
}
.cell {display: table-cell;border: 1px solid #cccccc;
}
.caption {display: table-caption;caption-side: bottom; /* 默认为top */margin: 10px;padding: 10px;
}
</style><div class="table"><div class="caption">这是表格的标题模块</div><div class="row row1">...</div><div class="row row2">...</div>
</div>
页面效果：

在这里插入图片描述

三、相关属性

1、caption-side

​ 该属性用于设置表格的标题模块（设置display: table-caption;的元素）相对于表格的位置，该属性的属性值有两种：

  • top（默认值）：标题模块位于表格上方。
  • bottom：标题模块位于表格的下方。
  • 更多内容可查看：caption-side。
2、border-collapse

​ 该属性用于设置表格内单元格的相邻边框是分开还是合并，属性值有两种：

  • separate(默认值)：设置相邻单元格的相邻边框不进行合并，相邻单元格都有自己的边框，因此表格中间的边框宽度将是表格最外侧边框宽度的两倍。而且只有此时可以通过border-spacing属性设置两个边框之间的距离。
  • collapse：设置相邻单元格的相邻边框进行合并，且合并后的边框宽度为单个边框的宽度，两个单元格共用一个边框。
  • 更多内容请查看：border-collapse。
<style>
.table {display: table;background: pink;border-collapse: collapse;
}
.table2 {margin-top: 30px;border-collapse: separate;
}
.table3 {margin-top: 30px;border-collapse: separate;border-spacing: 5px; /* 设置相邻边框之间的间隔 */
}
.row {display: table-row;
}
.cell {display: table-cell;border: 1px solid #cccccc;
}
</style><div class="table"><div class="row row1"><div class="cell cell1">张三</div><div class="cell cell2">李四</div><div class="cell cell3">王五</div></div><div class="row row2"><div class="cell cell1">张三三</div><div class="cell cell2">李四四</div><div class="cell cell3">王五五五</div></div></div><div class="table table2"><div class="row row1"><div class="cell cell1">张三</div><div class="cell cell2">李四</div><div class="cell cell3">王五</div></div><div class="row row2"><div class="cell cell1">张三三</div><div class="cell cell2">李四四</div><div class="cell cell3">王五五五</div></div></div><div class="table table3"><div class="row row1"><div class="cell cell1">张三</div><div class="cell cell2">李四</div><div class="cell cell3">王五</div></div><div class="row row2"><div class="cell cell1">张三三</div><div class="cell cell2">李四四</div><div class="cell cell3">王五五五</div></div></div>
页面效果：

在这里插入图片描述

4、table-layout

​ 该属性用于设置表格的布局算法，也就是如何分配单元格的宽度和调整表格的大小。属性值有两个：

  • auto(默认值)：表格及其单元格的宽度会根据内容自动调整大小。
  • fixed：表格和列的宽度是由 table 和 col 元素的宽度或第一行中单元格的宽度来设置的，默认一行中的单元格平分本行的宽度，如果有的单元格设置了宽度，则其余单元格平分宽度。下面行中的单元格的内容不会影响单元的宽度，但如果内容过多就很可能会溢出，因此可以结合overflow: hidden;等属性对内容进行截取。
  • 更多内容可查看：table-layout。
<style>.table {display: table;margin-bottom: 30px;background: pink;table-layout: fixed;width: 400px;}.row {display: table-row;}.cell {display: table-cell;/* width: 10px; */border: 1px solid #cccccc;}.table2 .cell1 {width: 30px;}
</style><div class="table"><div class="row row1"><div class="cell cell1">张三</div><div class="cell cell2">李四</div><div class="cell cell3">王五</div></div><div class="row row2"><div class="cell cell1">张三三</div><div class="cell cell2">李四四</div><div class="cell cell3">王五五五</div></div>
</div>
<div class="table table2"><div class="row row1"><div class="cell cell1">张三</div><div class="cell cell2">李四</div><div class="cell cell3">王五</div></div><div class="row row2"><div class="cell cell1">张三三</div><div class="cell cell2">李四四</div><div class="cell cell3">王五五五</div></div>
</div>
页面效果：

在这里插入图片描述

5、vertical-align

​ 该属性用于设置表格的单元格元素（display: table-cell;）的垂直对齐方式，也可用于设置页面中行内元素（inline）、行内块元素（inline-block）的垂直对齐方式。该属性的属性值有：

  • top(默认值)：设置单元格的内容与该行的顶部对齐。
  • bottom：设置单元格内容与该行的底部对齐。
  • middle：设置单元格内容在该行内垂直居中。
  • baseline、sub、super、text-top、text-bottom等其他属性。
  • 更多内容请查看：vertical-align。
<style>
.table {display: table;margin-bottom: 30px;background: pink;
}
.row {display: table-row;
}
.cell {display: table-cell;height: 200px;border: 1px solid #cccccc;vertical-align: middle; /* 设置内容在行内垂直居中对齐 */
}
</style><div class="table"><div class="row row1"><div class="cell cell1">张三</div><div class="cell cell2">李四</div><div class="cell cell3">王五</div></div><div class="row row2"><div class="cell cell1">张三三</div><div class="cell cell2">李四四</div><div class="cell cell3">王五五五</div></div>
</div>
页面效果：

在这里插入图片描述

四、参考资料

table的MDN文档

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/101977.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Docker-compos

Docker-compos

Docker-compose 简介 Docker-Compose项目是基于Python开发的Docker官方开源项目&#xff0c;负责实现对Docker容器集群的快速编排。 Docker-Compose将所管理的容器分为三层&#xff0c;分别是 工程&#xff08;project&#xff09;&#xff0c;服务&#xff08;service&#…
阅读更多...
HSRP热备份路由器协议的解析和配置

HSRP热备份路由器协议的解析和配置

HSRP的解析 个人简介 HSRP hot standby router protocol 热备份路由协议&#xff08;思科私有协议&#xff09; HSRP v1 version 1 HSRP v2 version 2 虚拟一个HSRP虚拟IP地址 192.168.1.1 开启HSRP的抢占功能 通过其他参数 人为调整谁是主 谁是从 &#xff01; 查…
阅读更多...
记录一次线上fullgc问题排查过程

记录一次线上fullgc问题排查过程

某天&#xff0c;接到测试部门反馈说线上项目突然很快&#xff0c;由于当前版本代码和上一版本相比就多了一个刚上线了一个5分钟1次的跑批任务&#xff0c;先关闭次任务后观察是否卡顿&#xff0c;并检查堆内存是否使用完造成频繁gc 1.通过jmap命令查看堆内存中的对象 2.生成当…
阅读更多...
许战海战略文库|无增长则衰亡：中小型制造企业增长困境

许战海战略文库|无增长则衰亡：中小型制造企业增长困境

竞争环境不是匀速变化&#xff0c;而是加速变化。企业的衰退与进化、兴衰更迭在不断发生&#xff0c;这成为一种不可避免的现实。事实上&#xff0c;在产业链竞争中增长困境不分企业大小&#xff0c;而是一种普遍存在的问题&#xff0c;许多收入在1亿至10亿美元间的制造企业也同…
阅读更多...
PlantUML 绘图

PlantUML 绘图

官网 https://plantuml.com/zh/ 示例 绘制时序图 USB 枚举过程 PlantUML 源码 startuml host <-- device : device insert host note right : step 1 host -> device : get speed, reset, speed check note right : step 2 host -> device …
阅读更多...
Premiere Elements 2024(PR简化版)直装版

Premiere Elements 2024(PR简化版)直装版

Adobe Premiere Elements 2024 是一款由Adobe Systems推出的视频编辑软件&#xff0c;它结合了易用性和专业级的功能&#xff0c;帮助用户对视频进行剪辑、特效、色彩校正等处理。 主要功能和特点&#xff1a; 导入和组织视频&#xff1a;Premiere Elements 2024允许用户快速导…
阅读更多...
ESP8266 WiFi物联网智能插座—下位机软件实现

ESP8266 WiFi物联网智能插座—下位机软件实现

目录 1、软件架构 2、开发环境 3、软件功能 4、程序设计 4.1、初始化 4.2、主循环状态机 4.3、初始化模式 4.4、配置模式 4.5、运行模式 4.6、重启模式 4.7、升级模式 5、程序功能特点 5.1、日志管理 5.2、数据缓存队列 本篇博文开始讲解下位机插座节点的MCU软件…
阅读更多...
虚拟机软件Parallels Desktop 19 mac功能介绍

虚拟机软件Parallels Desktop 19 mac功能介绍

Parallels Desktop 19 mac是一款虚拟机软件&#xff0c;它允许用户在Mac电脑上同时运行Windows、Linux和其他操作系统。Parallels Desktop提供了直观易用的界面&#xff0c;使用户可以轻松创建、配置和管理虚拟机。 PD19虚拟机软件具有快速启动和关闭虚拟机的能力&#xff0c;让…
阅读更多...
Kelper.js 笔记 python交互

Kelper.js 笔记 python交互

1 加载Kepler 地图 KeplerGl() 1.1 主要参数 height 可选 默认值&#xff1a;400 地图显示的高度 data 数据集 字典&#xff0c;键是数据集的名称 config地图配置字典 1.2 举例 from keplergl import KeplerGlmap_KeplerGl() map_ 默认的位置 1.3 添加自己的图 1.3.1 读…
阅读更多...
ElementPlus Switch 开关基础使用

ElementPlus Switch 开关基础使用

昨天开发用到开关组件 后台返回字段是 can_write 默认是0 or 1 但是Switch 组件绑定的默认值默认是 true or false 直接绑定会导致默认是关闭状态 在页面一加载 值发生变化时 会自己调用 查了文档 需要使用 active-value 和 inactive-value 来指定绑定的数据类型 …
阅读更多...
23种经典设计模式：单例模式篇（C++）

23种经典设计模式：单例模式篇（C++）

前言&#xff1a; 博主将从此篇单例模式开始逐一分享23种经典设计模式&#xff0c;并结合C为大家展示实际应用。内容将持续更新&#xff0c;希望大家持续关注与支持。 什么是单例模式&#xff1f; 单例模式是设计模式的一种&#xff08;属于创建型模式 (Creational Pa…
阅读更多...
网页游戏的开发流程

网页游戏的开发流程

网页游戏的开发流程可以根据项目的规模和复杂性而有所不同&#xff0c;但通常包括以下一般步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.需求分析&#xff1a; 确定游戏的概念、目标受众和核…
阅读更多...
手写 分页

手写 分页

子组件&#xff1a;TimePage.vue 效果图 <template><div class"click-scroll-X"><!-- 上 --><!-- eslint-disable-next-line --><span class"left_btn" :disabled"pageNo 1" click"leftSlide"><&…
阅读更多...
PanoFlow：学习360°用于周围时间理解的光流

PanoFlow：学习360°用于周围时间理解的光流

1.摘要&#xff1a; 光流估计是自动驾驶和机器人系统中的一项基本任务&#xff0c;它能够在时间上解释交通场景。自动驾驶汽车显然受益于360提供的超宽视野&#xff08;FoV&#xff09;◦ 全景传感器。 然而&#xff0c;由于全景相机独特的成像过程&#xff0c;为针孔图像设计…
阅读更多...
NSIC2050JBT3G 车规级120V 50mA ±15% 用于LED照明的线性恒流调节器(CCR) 增强汽车安全

NSIC2050JBT3G 车规级120V 50mA ±15% 用于LED照明的线性恒流调节器(CCR) 增强汽车安全

随着汽车行业的巨大变革&#xff0c;高品质的汽车氛围灯效、仪表盘等LED指示灯效已成为汽车内饰设计中不可或缺的元素。深力科安森美LED驱动芯片系列赋能智能座舱灯效充满艺术感和科技感——NSIC2050JBT3G LED驱动芯片&#xff0c;实现对每路LED亮度和颜色进行细腻控制&#xf…
阅读更多...
SLAM从入门到精通（launch文件学习）

SLAM从入门到精通（launch文件学习）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 大家应该还记得我们在一开始学习ros的时候&#xff0c;如果需要启动一个节点的话&#xff0c;需要首先打开roscore&#xff0c;接着用rosrun打开对…
阅读更多...
shiro550复现环境搭建

shiro550复现环境搭建

前言 Shiro反序列化漏洞指的是Apache Shiro安全框架中的一个潜在漏洞&#xff0c;该漏洞可能导致攻击者能够通过精心构造的恶意序列化对象来执行任意代码或进行拒绝服务&#xff08;DoS&#xff09;攻击。 这种漏洞的根源是在Shiro的RememberMe功能中&#xff0c;当用户选择“…
阅读更多...
制造业单项冠军（国家级、广东省、深圳市）奖励政策及申报对比

制造业单项冠军（国家级、广东省、深圳市）奖励政策及申报对比

制造业单项冠军的头衔含金量极高&#xff0c;是某一细分领域的“领头雁”。下面深科信对“制造业单项冠军”&#xff08;国家级、广东省级、深圳市级&#xff09;的认定标准、奖励政策进行梳理 。 2023年9月25日&#xff0c;工信部办公厅正式发布《关于开展2023年制造业单项冠军…
阅读更多...
【TensorFlow2 之012】TF2.0 中的 TF 迁移学习

【TensorFlow2 之012】TF2.0 中的 TF 迁移学习

#012 TensorFlow 2.0 中的 TF 迁移学习 一、说明 在这篇文章中&#xff0c;我们将展示如何在不从头开始构建计算机视觉模型的情况下构建它。迁移学习背后的想法是&#xff0c;在大型数据集上训练的神经网络可以将其知识应用于以前从未见过的数据集。也就是说&#xff0c;为什么…
阅读更多...
linux 安装mysql

linux 安装mysql

1、下载mysql安装包 2、创建mysql文件夹 mkdir /usr/local/mysql 3、解压mysql安装包&#xff0c;并将解压出来的文件夹下面的内容全部移动到/usr/local/mysql下 解压 tar zxvf mysql-5.7.39-linux-glibc2.12-x86_64.tar.gz 移动 mv /usr/local/src/mysql-5.7.39-linux-gl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023