首页 专题 H5案例 前端导航 UI框架

表格布局display: table的妙用

作者:TG 日期: 2017-10-19 阅读: 2221
说到表格布局,相信大家首先想到的是<table>标签,其实,在CSS2中还提供了一种表格布局:display: table,今天刚好用到,就有必要来深究一下了!

虽然CSS3已经出现了display: flexFlex布局)和display: gridCSS:Grid布局),但这两个还是有兼容性的,而且存在即有用处,当你使用过display: table,你才发现用处还是不少的。

首先来看看display: table的兼容性:


可以看到,除非你还要跟IE6/7较劲,否则display: table不需考虑兼容性。

接下来看看关于table的display可选值:
  • table:指定对象作为块元素级的表格,相当于html标签<table>
  • inline-table:指定对象作为内联元素级的表格,相当于html标签<table>
  • table-caption:指定对象作为表格标题,相当于html标签<caption>
  • table-cell:指定对象作为表格单元格,相当于html标签<td>
  • table-row:指定对象作为表格行,相当于html标签<tr>
  • table-row-group:指定对象作为表格行组,相当于html标签<tbody>
  • table-column:指定对象作为表格列,相当于html标签<col>
  • table-column-group:指定对象作为表格列组显示,相当于html标签<colgroup>
  • table-header-group:指定对象作为表格标题组,相当于html标签<thead>
  • table-footer-group:指定对象作为表格脚注组,相当于html标签<tfoot>

还有一些协助属性:
  • border-collpase:用来决定表格的边框是分开的还是合并的。在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。
  • border-spacing: 规定相邻单元格边框之间的距离(只适用于 边框分离模式 )。相当于 HTML 中的 cellspacing 属性,但是第二个可选的值可以用来设置不同于水平间距的垂直间距。
  • table-layout:定义了用于布局表格单元格,行和列的算法。(auto:表格及单元格的宽度取决于其包含的内容。fixed:表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。)
  • vertical-align:用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

从上面的各个属性可以看到,不用<table>标签,我们完全可以实现表格布局。

下面看看四个实例:
  • 响应式布局
  • 自动占满剩余空间
  • 动态垂直居中对齐
  • 动态水平居中对齐


如有疑问,欢迎在下方评论区留言!



关注”全栈技术杂货铺“

全栈技术杂货铺