CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题

我们轻松实现了三栏等高布局，而无需使用伪造背景图片之类的技巧，更不用担心定位和清除浮动的问题！

1. 它是怎样实现的？

你可以给HTML元素指定与表格相关的display属性值，使得它们像表格元素那样渲染。以下是这些可用的display属性值：

- table：使该元素按table样式渲染

- table-row：使该元素按tr样式渲染

- table-cell：使该元素按td样式渲染

- table-row-group：使该元素按tbody样式渲染

- table-header-group：使该元素按thead样式渲染

- table-footer-group：使该元素按tfoot样式渲染

- table-caption：使该元素按caption样式渲染

- table-column：使该元素按col样式渲染

- table-column-group：使该元素按colgroup样式渲染

2. 等等……难道用table布局不是错的吗？

可能你会对我们上面给出的布局实例有点不爽——毕竟，正如我自己也是一名WEB标准化的拥护者，我们不都一直坚持不应该使用table来进行布局吗？

table元素在HTML当中是一个包含语义的标签：它描述什么是数据。因此，你只能用它来标记那些需要制表的数据，例如一张财务信息表。如果数据能够以电子表格的形式保存在你的电脑中，那它在HTML文档中很可能需要用到table标签进行标记

从另一方面来看，display的table属性值只是声明了某些元素在浏览器中的样式——它不包含语义。如果使用table元素来进行布局，它将会告诉客户端：这些数据是制表的。使用一些display属性被设置为table和table-cell之类的div标签，除了告诉客户端以某种特定的样式来渲染它们以外，不会告诉客户端任何语义，只要客户端能够支持这些属性值

当然，我们同样还要注意，当我们真的需要制表数据的时候不要使用一大堆被声明为display:table;的div元素。我们上面的那个例子是一个简单的单行三列布局，无需费尽心思，我们就能够使用这种技术轻松实现复杂的栅格布局。

3. 匿名表格元素

CSS表格除了包含table布局的普通规则之外，同时还有着CSS table布局的超强特性：缺少的表格元素会被浏览器以匿名方式创建。CSS2.1规范中写道：

这段话的意思是，如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。

让我们用个简单的例子来研究下它的这一特性：以下是三栏栅格布局。我们将会用三份不同的HTML样例，而它们将表现出相同的视觉效果

首先，以下是能够生成三列布局样例的其中一份：

这份嵌套的div元素看起来不是那么让人兴奋，稍等一会，我们现在来做点什么。它的CSS样式也非常简单

以上CSS给类名为container的元素定义了“display:table;”属性，类名为row的元素定义了“display:table-row;”，类名为cell的元素定义了“display:table-cell;”，同样还给它定义了边框、高度和宽度值。

以上HTML文档明确地为三个单元格定义了包含它的表格和表格行，使用到了所有我们创建的CSS类名。然而，我们可以减少这些标签，移除一行div元素试试

即使上面的代码遗漏了声明表格的那一行，浏览器仍将创建一个匿名的表格行。我们还可以移除更多的代码

以上代码遗漏了声明表格和表格行的代码，浏览器同样会创建出这些匿名的盒对象。即使缺少这些标签元素，最终的效果仍然是一样的。

4. 创建匿名表格元素的规则

这些匿名的盒对象不是用魔术变出来的，它们也不会自动往你的HTML源码中添加新的标签。为了完全发挥出匿名表格元素的优势，你最好能够对创建它们的规则有所了解。如果布局中调用了匿名元素，浏览器将会根据需要创建一个匿名的盒对象并将它的CSS display属性设置为table、table-row或table-cell中的一个

如果某个元素已经被设置为“display:table-cell;”，而它的父节点（包含它的容器）没有被设置为“display:table-row;”属性，那么浏览器将会创建一个被设置为“display:table-row;”的匿名盒对象来嵌套它。并且与之相邻的属性为“display: table-cell;”的兄弟节点也都会被这个匿名盒对象所包含，直到碰到一个没有被设置为“display: table-cell;”的元素而结束这一行。

上面的三个类名为“cell”的div元素均被设置为“display:table-cell;”，它们将会像一个单行表格的三个单元格一样并列排布。最后一个div元素则不会被包含在这一表格行当中，因为它没有被设置成“display:table-cell;

如果某个元素被设置为“display:table-row;”，而它的父节点没有被设置为“display:table;”（或者“display:table-row-group;”），浏览器将会创建一个被设置为“display:table;”的匿名盒对象来嵌套它，与之相邻的属性为“display: table-row;”的兄弟节点也都会被包含其中。同样，如果某个元素被设置为“display:table-row;”，但它的内部却缺少“display:table-cell;”的元素，那么一个匿名的table-cell将会被创建，用来包含该table-row中的所有元素

上面两排类名为“row”的div元素被设置了“display:table-row;”属性，它们将会像单列表格中的两行一样依次排列。最后一个div元素则不会包含在这个匿名的table中

以此类推，如果某个元素的display属性值被设置为与表格相关的值，如table-row-group、table-header-group、 table-footer-group、table-column、table-column-group以及table-caption，但同时又没有一个被设置为“display:table;”的父元素，那么一个匿名的盒对象将会被创建用来包含该元素和它的某些兄弟节点。

5. 其他有用的表格属性

当使用CSS表格时，因为这些表格内的元素遵从table布局的普通规则，所以你还可以给它们应用其它表格相关的CSS属性。下面是一些派得上用场的属性：

table-layout

将table-layout属性设置为fixed后，则列宽由固定的表格宽度和列宽度设定。这在固定宽度布局中非常有用，例如我们最上面的那段布局代码

5.1 table-layout:fixed是采用固定表格布局，固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

5.2 table-layout:automatic是采用自动表格布局，在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

Border-collapse

和普通的HTML表格一样，你可以使用border-collapse属性来定义你的table布局元素之间使用何种形式的边框，是共用边框（赋值为collapse）还是使用各自独立的边框（赋值为separate）

Border-spacing

如果你声明了“border-collapse:separate;”，那么你就可以使用border-spacing属性来定义相邻两个单元格边框间的距离

基于display:table的CSS布局相关推荐

  1. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  2. 拜拜了,浮动布局-基于display:inline-block的列表布局

     一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写"CSS float浮动的深入研究.详解及拓展(一)"和"CSS float浮动的深入研究.详解及拓 ...

  3. CSS学习笔记（九）display: inline-block，CSS 布局- 水平和垂直对齐

    CSS 布局 - display: inline-block display: inline-block 与 display: inline 相比,主要区别在于 display: inline-blo ...

  4. CSS display:table属性用法解析

    本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...

  5. bootstrap 垂直居中 布局_给你一份详细的CSS布局指南，请查收

    作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...

  6. 与table有关的布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  7. 给你一份详细的web前端CSS布局指南，请查收

    我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而其中,关于页面布局的部分,又是书写样式代码时候的重点和难点,这篇文章就尽可 ...

  8. display:table与本身的table的区别

    一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...

  9. CSS2中display:table属性的用法详解

    想必大家都已经知道了css属性display的一些常见属性值,比如none,block,inline-block等等,今日我在看一个效果代码的时候,碰到一个之前从未使用过的属性值,就是它了,displ ...

最新文章

  1. android下载后的app自动安装,Android 7.0 下载APK后自动安装
  2. 关于敏捷开发的最佳实践和工具
  3. ICE简单介绍及使用示例
  4. transformcontrols可以用在group上吗_电缆沟盖板可以用在水沟上吗
  5. vb microsoft.xmlhttp 获取所有超链接_利用VBA批量自动生成表格超链接
  6. 升级总代分享思路_桃生企业至尊七郎瓷砖新展厅全新升级惊艳亮相
  7. HttpServletRequest中获取IP值
  8. 计算机学院特色迎新标语,2019大学各学院开学迎新创意标语 2019各大学网红创意迎新宣传标语...
  9. ps计算机按键.,计算机一级Photoshop视图操作快捷键
  10. 三星Galaxy S21 FE证件照公布：120Hz高刷直屏+骁龙888处理器
  11. pb 如何判断数据窗口中是否有某个字段_怎么判断数据窗口中某个字段存在重复的数据...
  12. NLP --- 隐马尔可夫HMM（第三个问题详解及HMM的应用）
  13. erp故障处理流程图_(完整版)最新鼎捷易助ERP常见问题故障及解决方案方法FAQ
  14. 苹果Magic Trackpad2成功被谷歌团队写进去个Linux
  15. YunCharging充电桩系统开源源码，配套设备+小程序直接商用落地
  16. 免费后台管理UI界面、html源码推荐
  17. 杭电2566_统计硬币——java
  18. 随手科技企业入选互联网金融协会增选常务理事，消除随手记投资靠谱吗
  19. 原画还是3D建模？业内发展趋势，你来权衡
  20. 程序员必备的沟通技巧

热门文章

  1. java集合概念_JAVA集合概念
  2. graphpad7.04多组比较p值_同是折线图为何你却这么优秀，这才是多组数据作图应该有的样子...
  3. SpringBoot项目利用maven自定义打包结构
  4. centos7 下安装Poco
  5. 使用 C++ 处理 JSON 数据交换格式
  6. 在dos下运行.exe程序(C++)
  7. [react] 请说下react组件更新的机制是什么
  8. 前端学习（3337）：ant design中button按钮尺寸size
  9. React开发（150）:注意定义数组格式
  10. javascript学习系列(20):数组中的bind,apply,call