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&#…
阅读更多...
Java基础面试-重载和重写的区别

Java基础面试-重载和重写的区别

重载:发生在同一个类中&#xff0c;方法名必须相同&#xff0c;参数类型不同、个数不同、顺序不同&#xff0c;方法返回值和访问修饰符可 以不同&#xff0c;发生在编译时。 重写:发生在父子类中&#xff0c;方法名、参数列表必须相同&#xff0c;返回值范围小于等于父类&…
阅读更多...
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亿美元间的制造企业也同…
阅读更多...
【Redis】Redis中的Big Key问题：排查与解决思路

【Redis】Redis中的Big Key问题：排查与解决思路

原创不易&#xff0c;注重版权。转载请注明原作者和原文链接 文章目录 Big Key问题介绍Big Key问题排查BIGKEYS命令Debug Objectmemory usage redis-rdb-tools Big Key问题解决思路分割大key对象压缩直接删除 在处理大型数据时&#xff0c;Redis 作为我们的非关系型数据库经常出…
阅读更多...
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 …
阅读更多...
LONGLORA: EFFICIENT FINE-TUNING OF LONGCONTEXT LARGE LANGUAGE MODELS

LONGLORA: EFFICIENT FINE-TUNING OF LONGCONTEXT LARGE LANGUAGE MODELS

本文是LLM系列文章&#xff0c;针对《LONGLORA: EFFICIENT FINE-TUNING OF LONGCONTEXT LARGE LANGUAGE MODELS》的翻译。 Longlora:长上下文大型语言模型的高效微调 摘要1 引言2 相关工作3 LongLoRA4 实验5 结论 摘要 我们提出了LongLoRA&#xff0c;一种有效的微调方法&…
阅读更多...
Premiere Elements 2024(PR简化版)直装版

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

Adobe Premiere Elements 2024 是一款由Adobe Systems推出的视频编辑软件&#xff0c;它结合了易用性和专业级的功能&#xff0c;帮助用户对视频进行剪辑、特效、色彩校正等处理。 主要功能和特点&#xff1a; 导入和组织视频&#xff1a;Premiere Elements 2024允许用户快速导…
阅读更多...
JAVA设计模式-模板模式

JAVA设计模式-模板模式

一.概念 定义一个操作中的算法的骨架&#xff0c;而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 ​ 使用了JAVA的继承机制&#xff0c;在抽象类中定义一个模板方法&#xff0c;该方法引用了若干个抽象方法&#xff0…
阅读更多...
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…
阅读更多...
RK3588平台产测之ArmSoM-W3 DDR带宽监控

RK3588平台产测之ArmSoM-W3 DDR带宽监控

1. 简介 专栏总目录 ArmSoM团队在产品量产之前都会对产品做几次专业化的功能测试以及性能压力测试&#xff0c;以此来保证产品的质量以及稳定性 优秀的产品都要进行多次全方位的功能测试以及性能压力测试才能够经得起市场的检验 2. 环境介绍 硬件环境&#xff1a; ArmSoM-W…
阅读更多...
stm32（二十）IAP升级优化（双缓存，可恢复）

stm32（二十）IAP升级优化（双缓存，可恢复）

这次主要对STM32F103/Keil和LPC2478/IAR加了一个IAP在线升级功能&#xff0c; 主要记录一下自己的思路&#xff0c;无代码&#xff0c;实在是代码感觉没啥写的&#xff0c;都是一些网上很多流传的东西。 1、开发环境 Keilstm32f103JLINK 2、程序思路 在升级中&#xff0c;必…
阅读更多...
JS 图片的左右切换

JS 图片的左右切换

图片的左右切换 <div class"slider"><img src"image1.jpg" alt"Image 1"><img src"image2.jpg" alt"Image 2"><img src"image3.jpg" alt"Image 3"> </div> <button …
阅读更多...
网页游戏的开发流程

网页游戏的开发流程

网页游戏的开发流程可以根据项目的规模和复杂性而有所不同&#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"><&…
阅读更多...
最新文章

Copyright @ 2022~2023