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.rhkb.cn/news/155620.html

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

相关文章

Python之函数详解

Python之函数详解

一、函数的定义与调用 函数定义语法&#xff1a; def 函数名([参数列表]): ‘’‘注释’‘’ 函数体 注意事项 函数形参不需要声明类型&#xff0c;也不需要指定函数返回值类型即使该函数不需要接收任何参数&#xff0c;也必须保留一对空的圆括号 括号后面的冒号必不可少函数…
阅读更多...
IntelliJ IDEA 2023.1 版本可以安装了

IntelliJ IDEA 2023.1 版本可以安装了

Maven 的导入时间更加快了。 收到的有邮件提醒安装。 安装后的版本&#xff0c;其实就是升级下&#xff0c;并没有什么主要改变。 IntelliJ IDEA 2023.1 版本可以安装了 - 软件技术 - OSSEZMaven 的导入时间更加快了。 收到的有邮件提醒安装。 安装后的版本&#xff0c;其实就是…
阅读更多...
Lumen/Laravel - 数据库读写分离原理 - 探究

Lumen/Laravel - 数据库读写分离原理 - 探究

1.应用场景 主要用于学习与探究Lumen/Laravel的数据库读写分离原理。 2.学习/操作 1.文档阅读 chatgpt & 其他资料 数据库入门 | 数据库操作 | Laravel 8 中文文档 入门篇&#xff08;一&#xff09;&#xff1a;数据库连接配置和读写分离 | 数据库与 Eloquent 模型 | La…
阅读更多...
OrcaTerm AI

OrcaTerm AI

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…
阅读更多...
为什么选择虚拟展会展览？了解虚拟展会展览的应用领域

为什么选择虚拟展会展览？了解虚拟展会展览的应用领域

引言&#xff1a; 相较于传统的实体展览&#xff0c;虚拟展会展览具有吸引力和便捷性&#xff0c;能够在全球范围内进行宣传活动。这种创新形式不仅能够降低成本、扩大受众范围&#xff0c;还能够提供没有过的互动性和数据分析。 一&#xff0e;虚拟展会展览简介 虚拟展会展览…
阅读更多...
[RoarCTF 2019]Easy Calc - RCE(函数输出)+参数waf绕过(PHP字符串解析特性)

[RoarCTF 2019]Easy Calc - RCE(函数输出)+参数waf绕过(PHP字符串解析特性)

[RoarCTF 2019]Easy Calc 1 解题流程2 思考总结1 解题流程 打开页面让我们输入，输了没反应（执行报错），F12发现js有代码$(#calc).submit(function(){$.ajax(
阅读更多...
【23-24 秋学期】NNDL 作业3

【23-24 秋学期】NNDL 作业3

过程推导 - 了解BP原理数值计算 - 手动计算&#xff0c;掌握细节代码实现 - numpy手推 pytorch自动 对比【numpy】和【pytorch】程序&#xff0c;总结并陈述。激活函数Sigmoid用PyTorch自带函数torch.sigmoid()&#xff0c;观察、总结并陈述。激活函数Sigmoid改变为Relu&#…
阅读更多...
身份证读卡器跟OCR有何区别？哪个好？

身份证读卡器跟OCR有何区别？哪个好？

二代身份证读卡器&#xff08;以下简称读卡器&#xff09;和OCR&#xff08;光学字符识别&#xff09;是两种常见的身份证信息获取技术&#xff0c;它们在原理、功能和应用方面存在一些区别。下面将详细介绍二者的区别并探讨哪个更好。 1. 原理&#xff1a; - 读卡器&#xff…
阅读更多...
CSS图文悬停翻转效果完整源码附注释

CSS图文悬停翻转效果完整源码附注释

实现效果截图 HTML页面源码 <!DOCTYPE html> <html><head><meta http-equiv="content-type
阅读更多...
【AntDesign】多环境配置和启动

【AntDesign】多环境配置和启动

环境分类&#xff0c;可以分为 本地环境、测试环境、生产环境等&#xff0c;通过对不同环境配置内容&#xff0c;来实现对不同环境做不同的事情。 AntDesign 项目&#xff0c;通过 config.xxx.ts 添加不同的后缀来区分配置文件&#xff0c;启动时候通过后缀启动即可。 config…
阅读更多...
Centos7安装Gitlab--gitlab--ee版

Centos7安装Gitlab--gitlab--ee版

1 安装必要依赖 2 配置GitLab软件源镜像 3 下载安装GitLab 4 查看管理员root用户默认密码 5 登录GitLab 6 修改密码 7 gitlab相关命令 1 安装必要依赖 sudo yum install -y curl policycoreutils-python openssh-server perl sudo systemctl enable sshd sudo systemctl sta…
阅读更多...
antd Form shouldUpdate 关联展示 form 数组赋值

antd Form shouldUpdate 关联展示 form 数组赋值

form 数组中嵌套数值更新 注意&#xff1a;数组是引用类型 项目需求&#xff0c;表单中包含多个产品信息&#xff0c;使用form.list 数组嵌套&#xff0c;提货方式如果是邮寄展示地址&#xff0c;如果是自提&#xff0c;需要在该条目中增加两项 代码如下&#xff1a;// An hi…
阅读更多...
K8S云计算系列-(4)

K8S云计算系列-(4)

K8s Dashboard UI 部署实操 Kubernetes实现的最重要的工作是对Docker容器集群统一的管理和调度&#xff0c;通常使用命令行来操作Kubernetes集群及各个节点&#xff0c;命令行操作非常不方便&#xff0c;如果使用UI界面来可视化操作&#xff0c;会更加方便的管理和维护。如下为…
阅读更多...
优盘无法格式化？分享简单解决方法！

优盘无法格式化？分享简单解决方法！

“我的优盘插入了一个带病毒的电脑中&#xff0c;现在优盘也中毒了&#xff0c;想把它格式化。但是操作的时候却显示优盘无法格式化&#xff0c;这种情况应该怎么办呢&#xff1f;” 优盘&#xff0c;又称USB闪存驱动器。由于其体积小且方便携带&#xff0c;受到广大电脑用户的…
阅读更多...
elasticsearch 8.5.3问题记录

elasticsearch 8.5.3问题记录

一&#xff1a;解决 elasticsearch 高版本 warning: ignoring JAVA_HOMEC:\Program Files\Java\jdk-11&#xff1b; using bundled JDK if defined JAVA_HOME (set JAVA_HOME%JAVA_HOME%; )示例版本Elasticsearch 8.5.3 可以与 JDK 11 兼容&#xff0c;但不支持 JDK 17。确保选…
阅读更多...
亏损8.5万亿，美芯将敞开供应存储芯片，试图压制中国存储芯片

亏损8.5万亿，美芯将敞开供应存储芯片，试图压制中国存储芯片

近期美国表示将给与韩国存储芯片无限期豁免&#xff0c;允许它们将先进芯片设备运到它们在中国的存储芯片&#xff0c;这意味着这两家韩国存储芯片企业可以敞开对中国供应存储芯片了&#xff0c;为何美国会突然放开呢&#xff1f; 一方面是韩国存储芯片已陷入窘境&#xff0c;据…
阅读更多...
【算法-贪心】无重叠区间-力扣 435 题

【算法-贪心】无重叠区间-力扣 435 题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…
阅读更多...
配application.xml属性

配application.xml属性

阅读更多...
Blender：对模型着色

Blender：对模型着色

Blender&#xff1a;使用立方体制作动漫头像-CSDN博客 上一步已经做了一个头像模型&#xff0c;我做的太丑了&#xff0c;就以这个外星人头像为例 首先切换到着色器编辑器 依次搜索&#xff1a;纹理坐标、映射、分离xyz和颜色渐变 这里的功能也是非常丰富和强大&#xff0c…
阅读更多...
迁移学习--预训练微调

迁移学习--预训练微调

目录 1、迁移学习作用 2、迁移学习的途径 3、相关的领域 4、在计算机视觉中的应用 5、迁移学习的办法 预训练模型 微调 6、总结 1、迁移学习作用 定义&#xff1a;能在一个任务学习一个模型&#xff0c;然后用来解决相关的别的任务&#xff0c;这样我们在一个地方花…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023