1. table布局方式

2. table布局实际应用

效果:

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        /*CSS Table*/

        .table { display: table; }

        .table-fixed { table-layout: fixed; }

        .table-row { display: table-row; }

        .table-cell { display: table-cell; }

        .table-colgroup { display: table-column-group; }

        .table-caption { display: table-caption; }

        .table-col { display: table-column; }

        .table-body { display: table-row-group; }

        .table-header { display: table-header-group; }

        .table-footer { display: table-footer-group; }

        .table-vt { vertical-align: top; }

        .table-vm { vertical-align: middle; }

        .table-vb { vertical-align: bottom; }

        /*CSS Table*/

        html,

        body { height: 100%;margin: 0; padding: 0; background: #333;}

        div.demo1 { width: 100%;height: 200px; }

        .box1 { background: #6D5CAE; }

        .box2 { background: #48B0F7; }

        .box3 { background: #10CFBD; }

        h3 { padding-left: 20px;color: #fff; }

        .demo2 { width: 400px;height: 300px;}

        .demo2 div.table-header-group {padding: 5px 20px;background: #10CFBD;}

        .demo2 .main {height: 100%;background: #48B0F7;}

        .demo2 div.table-footer-group {padding: 5px 20px;background: #10CFBD;}

        .demo3 {width: 400px;height: 300px;background: #10CFBD;}

        .demo4 {width: 400px;height: 300px;background: #10CFBD;text-align: center;}

        .center-box {width: 100px;height:100px;background: #6D5CAE;display: inline-block;}

        .header{font-size:30px;}

        /*列表布局，等空隙*/

        .grid {

            display: table;

            border-spacing: 4px;

        }

        .row {

            display: table-row;

        }

        .image {

            display: table-cell;

            width: 240px;

            height: 300px;

            background-color: lightsalmon;

            vertical-align: top;

            text-align: center;

        }

    </style>

</head>

<body>

    <h3>子容器自动平分宽度(即使设置宽度，也会进行自动等分，自适应父容器的宽度)</h3>

    <div class="table demo1">

        <div class="box1 table-cell">1</div>

        <div class="box2 table-cell">2</div>

        <div class="box3 table-cell">3</div>

    </div>

    <h3>垂直三行，中间自适应</h3>

    <div class="table demo2">

        <div class="header table-header-group">Table Header</div>

        <div class="main table-row">自动占满剩余空间</div>

        <div class="table-footer-group">Table Footer</div>

    </div>

    <h3>垂直居中对齐</h3>

    <div class="table demo3">

        <div class="table-cell table-vm">

            <div class="center-box">123</div>

        </div>

    </div>

    <h3>水平居中对齐</h3>

    <div class="demo4" style="text-align:left;">

        <div class="table" style="margin:0 auto">

            <div class="center-box">123</div>

        </div>

    </div>

    <h3>水平居中对齐2</h3>

    <div class="demo4" style="text-align:left;">

        <span class="center-box table" style="margin:0 auto">123345678</span>

    </div>

    <h3>列表布局，border-spacing实现等空隙</h3>

    <div class="grid">

        <div class="row">

            <div class="image"></div>

            <div class="image"></div>

            <div class="image"></div>

        </div>

        <div class="row">

            <div class="image"></div>

            <div class="image"></div>

            <div class="image"></div>

        </div>

    </div>

</body>

</html>

3. table布局其他应用

1. 实现两端对齐布局，使用两个table-cell，分别text-align:left和text-align:right，由于要额外套两个容器，所以不是较好的方法
2. 实现等高布局，具体可以参考等高布局
3. 实现两栏自适应布局，具体可以参考自适应布局

4. table布局的注意点

1. display: table时padding会失效
2. display: table-row时margin、padding同时失效
3. display: table-cell时margin会失效，padding有效，高度有效
4. display: table-cell时float, position:absolute会失效，不用同时使用

参考：http://ghmagical.com/article/page/id/s1x7vzL6Z2Sz
　　   https://blog.csdn.net/Xiaotongbiji/article/details/79851288
         https://blog.csdn.net/Bessicxie/article/details/78572424
         https://blog.csdn.net/Doulvme/article/details/79015264
         https://blog.csdn.net/huangbaokang/article/details/82183084

display:table布局总结的更多相关文章

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

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

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

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

  3. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

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

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

  5. 使用display:table使两栏布局高度相等

    两栏布局大家应该经常用了,但是遇到坑爹的要两栏的高度对齐的话要怎么办呢? <!DOCTYPE html> <html> <head> <meta charse ...

  6. css display:table圣杯布局

    圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...

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

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

  8. css table 布局

    使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题.例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一 ...

  9. 记录display:table的使用

    兼容性:不兼容IE7 1.左右对齐 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. x5webview 微信H5支付

    mWebView.setWebViewClient(new WebViewClient() { // @Override // public boolean shouldOverrideUrlLoad ...

  2. 解决ssh登录慢，等待时间长的问题

    有时候在ssh远程登录到其他主机上时发现登录时间太长,经过亲自测试,发现主要有两个问题会导致ssh登录慢: 1.使用了dns反查,这样的话当ssh某个IP时,系统会试图通过DNS反查相对应的域名,如果 ...

  3. 前端安全之XSS和csrf攻击

    1.Csrf攻击概念: csrf攻击(Cross-site request forgery):跨站请求伪造; 2.Csrf攻击原理: 用户是网站A的注册用户,且登录进去,于是网站A就给用户下发cook ...

  4. display:inline-block解决文字有间隙问题

    定义:display:inline-block是使元素以块级元素的形式呈现在行内.意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内联元素的增强. 但是display:in ...

  5. 文件系统inodes使用率过高问题处理

    运维过程中经常碰见文件系统inodes使用率过高导致文件系统不可写的问题,常见场景如下 .Oracle产生的审计文件,特别是DG备库或者审计设置为OS时 .crontab产生大量邮件,导致/var/s ...

  6. Sum All Odd Fibonacci Numbers-freecodecamp算法题目

    Sum All Odd Fibonacci Numbers 1.要求 给一个正整数num,返回小于或等于num的斐波纳契奇数之和. 斐波纳契数列中的前几个数字是 1.1.2.3.5 和 8,随后的每一 ...

  7. 多种方式实现依赖注入及使用注解定义bean

    构造注入 如何给构造方法中的参数注入方法呢如下 首先bean代码如下 package cn.pojo; public class Greeting { /** * 说的话 */ private Str ...

  8. (转)iOS 对矢量图片的支持如何？

    简单说,iOS 支持矢量图片,不过支持的一般.在系统层面上,iOS 对矢量绘图支持得很好.iOS 的 Core Graphics 框架带有很多矢量绘图命令,简单一些的直线.矩形.椭圆,复杂一些的贝赛尔 ...

  9. B - Sonya and Exhibition CodeForces - 1004B (思维题)

    B. Sonya and Exhibition time limit per test 1 second memory limit per test 256 megabytes input stand ...

  10. codeforces 258D DP

    D. Little Elephant and Broken Sorting time limit per test 2 seconds memory limit per test 256 megaby ...