目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？

1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大

2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示

3、非表格内容用table来装，不符合标签语义化要求，不利于SEO

4、table的嵌套性太多，用DIV代码会比较简洁

但是有的项目中又需要类似表格的布局怎么办呢？可以用display:table来解决

display:table系列几乎是和table系的元素相对应的，请看下表：

table （类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。
inline-table （类似 <table>）此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group （类似 <tbody>）此元素会作为一个或多个行的分组来显示。
table-header-group （类似 <thead>）此元素会作为一个或多个行的分组来显示。
table-footer-group （类似 <tfoot>）此元素会作为一个或多个行的分组来显示。
table-row （类似 <tr>）此元素会作为一个表格行显示。
table-column-group （类似 <colgroup>）此元素会作为一个或多个列的分组来显示。
table-column （类似 <col>）此元素会作为一个单元格列显示。
table-cell （类似 <td> 和 <th>）此元素会作为一个表格单元格显示。
table-caption （类似 <caption>）此元素会作为一个表格标题显示。

目前display:table的应用场景也是比较广泛的，Google地图在搜索路线时，左侧的路线详情就是用的display:table来实现的。

1.div模拟表格：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>模拟表格</title>

</head>

<body>

<style type="text/css" rel="stylesheet">

    .table {

        display: table;

        border: 1px solid #cccccc;

        margin: 5px;

        /*display: table时padding会失效*/

    }

    .row {

        display: table-row;

        border: 1px solid #cccccc;

        /*display: table-row时margin、padding同时失效*/

    }

    .cell {

        display: table-cell;

        border: 1px solid #cccccc;

        padding: 5px;

        /*display: table-cell时margin会失效*/

    }

</style>

<div class="table">

    <div class="row">

        <div class="cell">张三</div>

        <div class="cell">李四</div>

        <div class="cell">王五</div>

    </div>

    <div class="row">

        <div class="cell">张三</div>

        <div class="cell">李四</div>

        <div class="cell">王五</div>

    </div>

</div>

</body>

</html>

2.让块级标签实现行内效果，即浮动至同一横轴，并实现等高效果

table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说一下“匿名表格元素创建规则”：

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。

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

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>display:table实现浮动效果</title>

</head>

<body>

<style type="text/css" rel="stylesheet">

    .table {

        display: table;

        margin: 5px;

        width: 1000px;

    }

    .row {

        display: table-row;

    }

    .cell {

        display: table-cell;

        padding: 10px;

        background-color: red;

    }

</style>

<div class="table">

    <div class="row">

        <div class="cell">内容内容内容内容内容内内容内</div>

        <div class="cell">内容内容内容内容内容内容内容内容内容</div>

        <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>

    </div>

</div>

</body>

</html>

上例中div.row可以不要，效果一样

3.结合vetical-align实现块级元素垂直居中

display:table的用法的更多相关文章

  1. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  2. display:table / display:table-cell 用法

    display:table  元素会作为块级表格来显示(类似table):表格前后带有换行符: display:table-cell 元素会作为表格单元格来显示(类似<td> 和 < ...

  3. [转]基于display:table的CSS布局

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

  4. 使用display:table来解决一些问题

    一直有,多栏的需求,当然用table布局,很快就做完了.不怎么喜欢用table,刚开始使用display:table,但是有一条老是不能达到我的效果,那就是有一行不固定宽度的时候,就不知道怎么处理,今 ...

  5. 垂直居中display:table;

    父级元素 display:table: 子元素 display:table-cell:vertical-align:middle:

  6. alter table的用法

    在数据库开发过程中,除了用得最多的数据库查询外,我们有时也需要去修改数据表的定义,比如在已存在的数据表中新增列和删除列等.这篇文章就总结一下alter table语句的用法. 示例代码如下. USE ...

  7. display:table 水平居中

    <div style="width:auto; margin:auto;display:table"> <div style="width: 100px ...

  8. display:table表格合并单元格

    直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  9. Display:table;妙用，使得左右元素高度相同

    我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...

随机推荐

  1. redis 其他操作

    1.设定服务端密码 1.1.编辑 redis的配置文件 [root@centos7 ~]# vim /usr/local/redis/etc/redis.conf requirepass 123 # ...

  2. es7中数组如何判断元素是否存在

    const arr = [1,2,3,4,5,6] console.log(arr.includes(4)) //true

  3. 「 神器 」快速启动应用Wox

    每天进步一丢丢,连接梦与想 合理的的要求是锻炼 不合理的要求是磨练 过分的要求是锤炼 今天分享一个会让你爱不释手的神器,Wox Wox 是一款国产开源免费的软件快捷启动工具,它可以快速搜索并打开你电脑 ...

  4. 【Oracle】分区表详解

    此文从以下几个方面来整理关于分区表的概念及操作: 1.表空间及分区表的概念     2.表分区的具体作用     3.表分区的优缺点     4.表分区的几种类型及操作方法     5.对表分区的维护 ...

  5. orcle 创建用户的几个步骤

    创建用户一般分四步: 第一步:创建临时表空间 第二步:创建数据表空间 第三步:创建用户并制定表空间 第四步:给用户授予权限1.创建临时表空间 create temporary tablespace t ...

  6. mybatis in查询

    原文地址:https://blog.csdn.net/u012427355/article/details/79580561 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集 ...

  7. linux 为动态分配的Virtualbox虚拟硬盘扩容

    如何为动态分配的Virtualbox虚拟硬盘扩容 查看虚拟硬盘是否是动态分配大小 打开虚拟机的设置界面,在左侧栏点击存储．在存储树下面选择你的虚拟硬盘．在右边可以看见虚拟硬盘的信息．在下面可以看见,我 ...

  8. umake ide -h

    umake ide -husage: umake ide [-h]                 {netbeans,idea,clion,eclipse,atom,idea-ultimate,ec ...

  9. 自定义HttpMessageConverter实现RestTemplate的exchange方法返回自定义格式数据

    一 概述 实现如下效果代码,且可正常获取到返回数据: ResponseEntity<JsonObject> resEntity = restTemplate .exchange(url, ...

  10. Iptables和Firewall-selinux

    一.Iptables防火墙 ---------- **三表五链:**三表: filter过滤表 nat转换表 mangle表五链: PREROUTING--->在进行路由选择前处理数据包 INP ...