目前，在大多数开发环境中，已经基本不用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. python爬虫——urllib使用代理

    收到粉丝私信说urllib库的教程还没写,好吧,urllib是python自带的库,没requests用着方便.本来嘛,python之禅(import this自己看)就说过,精简,效率,方便也是大家 ...

  2. Robot Framework中对出错用例处理的策略

    出错后退出 在默认情况下,当一个测试用例中的某个关键字返回错误时,这个测试用例就停止执行剩余的关键字.RF会继续执行下一个用例.这么做的好处是节省时间--反正这里出问题要返回来看了,再继续执行剩下的关 ...

  3. RTC时间设置

    1.命令行输入date,查看系统时间. 2.命令行输入 date -s "2019-01-21 16:03:00" 修改系统时间. 3.命令行输入 hwclock -w 将修改后的 ...

  4. playbooks框架与子文件编写规范

    Test Playbooks框架 ​ 详细目录testenv文件 ​ 主任务文件main.yml ​ 任务入口文件deploy.yml ​ Ansible连接playbooks需要添加ssh协议认证 ...

  5. Activiti 规则任务（businessRuleTask）

    Activiti 规则任务(businessRuleTask) 作者:Jesai 目前国内研究Activiti规则任务businessRuleTask)的文章在网上应该不超出3篇 小觑夜漫酒作伴,破晓 ...

  6. Django HttpResponse、render、redirect

    一.HttpResponse 作业:返回相应的内容 格式: return HttpResponse("Hello, World") 二.render 作业:提交网页和字符串替换 提 ...

  7. Java入门 - 语言基础 - 11.switch_case

    原文地址:http://www.work100.net/training/java-switch-case.html 更多教程:光束云 - 免费课程 switch_case 序号 文内章节 视频 1 ...

  8. 每天玩转3分钟 MyBatis-Plus - 4. 高级查询（二）（条件构造器）

    每天玩转3分钟 MyBatis-Plus - 1. 配置环境 每天玩转3分钟 MyBatis-Plus - 2. 普通查询 每天玩转3分钟 MyBatis-Plus - 3. 高级查询(一) 每天玩转 ...

  9. BZOJ 1770 lights燈

    题目传送门 分析: 跑着去学了一波异或方程组高斯消元 (全世界就我不知道系列..) 然后我们可以列方程组诶 (a[1][x]&x[1])^(a[2][x]&x[2])^...^(a[n ...

  10. 第二次作业hzw

    第二次作业 | GIT地址 | 地址链接 | |--|--| |GIT用户名 | BRYANT333 | |学号后五位|24240| |博客地址|我的博客| |作业链接|第二次作业地址| 一.环境配置 ...