display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。

　　以下是display:的相关属性值：

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

<!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;

        border: 1px solid red;

        margin: 5px;

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

    }

    .row {

        display: table-row;

        border: 1px solid #000;

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

    }

    .cell {

        display: table-cell;

        border: 1px solid yellow;

        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>

1、让块级标签实现行内效果，即浮动至同一横轴

<!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;

    }

</style>

<div class="table">

    <div class="row">

        <div class="cell">努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力</div>

        <div class="cell">努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力</div>

        <div class="cell">努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力</div>

    </div>

</div>

</body>

</html>

2、实现垂直居中

<!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: 500px;

        height: 300px;

        background-color: #ccc;

    }

    .cell {

        display: table-cell;

        padding: 10px;

        vertical-align: middle;/*该属性是定义行内元素垂直对齐的，只有行内元素会生效。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。*/

    }

</style>

<div class="table">

        <div class="cell">努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力努力</div>

</div>

</body>

</html>

display:table的更多相关文章

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

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

  2. 垂直居中display:table;

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

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

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

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

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

  5. display:table 水平居中

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

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

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

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

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

  8. 记录display:table的使用

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

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

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

  10. VUE2.0 饿了吗视频学习笔记（七-终）：compute,循环,flex,display:table

    一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...

随机推荐

  1. Linux之bash的变量

    1. 变量的显示,echo echo $变量   或    echo ${变量} eg. echo $HOME   或   echo ${HOME} 2. 变量的设置 变量的设置规则: (1)变量与变 ...

  2. YUM源使用阿里镜像

    备份系统自带的yum源 # 前提:需要联网才能使用 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bac ...

  3. Python(1) 整型与浮动型

    整型与浮动型 整数/浮动数=浮点型整数/整数 = 浮点型 例如:>>> type(1/1)<class 'float'>>>> type(1/1.0)& ...

  4. BZOJ4625 [BJOI2016]水晶 最小割

    题意简述 给你一个三维的坐标系,坐标系上 \((x_i+y_i+z_i)\bmod 3 = 0\) 的点内有能量源.给定 \(n\) 个点含有能量值为 \(c_i\) 的水晶,如果一个水晶位于能量源上 ...

  5. day3 ord,chr,random,string

    day3复习 >>> for i in range(10): ... if i == 3: ... break ... print(i) ... 0 1 2 >>> ...

  6. 【leetcode】848. Shifting Letters

    题目如下: 解题思路:本题首先要很快速的计算出任意一个字符shift后会变成哪个字符,其实也很简单,让shift = shift % 26,接下来再做计算.第二部是求出每个字符要shift的次数.可以 ...

  7. visual studio 2017激活

    VS2017专业版和企业版激活密钥   Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB- ...

  8. React Native 之项目的启动

    运行项目有两种方法 1. 到根目录,执行 react-native run-ios 命令 会开启一个本地服务,加载jsbundle文件,然后是去index.js文件 import {AppRegist ...

  9. JavaScript性能优化之小知识总结

    1.避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些 2.定时器 如果针对的是不断运行的代码,不应该使用setTimeout,而 ...

  10. Acvitivi网关(十一)

    1排他网关 1.1 什么是排他网关 排他网关(也叫异或(XOR)网关,或叫基于数据的排他网关),用来在流程中实现决策. 当流程执行到这个网关,所有分支都会判断条件是否为 true,如果为 true 则 ...