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. vector存放结构体数据的2种方法

    如果要在Vector容器中存放结构体类型的变量,经常见到两种存放方式. 方式一:放入这个结构体类型变量的副本. 方式二:放入指向这个结构体类型变量的指针. 假设结构体类型变量是这样的, typedef ...

  2. 自定义任务状态来操作FreeRTOS任务的挂起，恢复，删除

    osThreadState osState2;//自定义一个线程的状态 osThreadState 系统枚举定义如下: typedef enum { osThreadRunning = 0x0, /* ...

  3. vscode 编写Markdown文件

    vscode使用Markdown文档编写   首先安装vscode工具,具体的使用可以参考之前的博文:<Visual Studio Code教程:基础使用和自定义设置> VScode已经默 ...

  4. 阅读《Effective Java》每条tips的理解和总结（1）

    <Effective Java>这本书的结构是90来条tips,有长有短,每条tip都值的学习.这里根据对书中每条tip的理解做简短的总结,方便日后回顾.持续更新~ 1. 考虑用静态方法代 ...

  5. codeforces 819B - Mister B and PR Shifts(思维)

    原题链接:http://codeforces.com/problemset/problem/819/B 题意:把一个数列整体往右移k位(大于n位置的数移动到数列前端,循环滚动),定义该数列的“偏差值” ...

  6. luogu P1428 小鱼比可爱 x

    P1428 小鱼比可爱 题目描述 人比人,气死人:鱼比鱼,难死鱼.小鱼最近参加了一个“比可爱”比赛,比的是每只鱼的可爱程度.参赛的鱼被从左到右排成一排,头都朝向左边,然后每只鱼会得到一个整数数值,表示 ...

  7. 嵌入式逻辑分析仪SignalTap II 设计范例

    Crazy Bingo :嵌入式逻辑分析仪SignalTap II 设计范例 例程下载地址  http://www.cnblogs.com/crazybingo/archive/2011/07/26/ ...

  8. 【bzoj1975】[Sdoi2010]魔法猪学院

    *题目描述: iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPig对猪世界的世界本原有了很多的了解:众所周知,世界是由元素构成的:元 ...

  9. Leetcode 2. Add Two Numbers(指针和new的使用)结构体指针

    ---恢复内容开始--- You are given two non-empty linked lists representing two non-negative integers. The di ...

  10. CF 546 B Soldier and Badges（贪心）

    原题链接:http://codeforces.com/problemset/problem/546/B 原题描述: Soldier and Badges Colonel has n badges. H ...