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. Java并发（基础知识）——显示锁和同步工具类

    显示锁                                                                                     Lock接口是Java ...

  2. 如何算gama(1/2)=sqrt(pi)?

    关键是算e^{-x^2}在0到oo的定积分是sqrt(pi)/2. 或者利用高斯密度函数来求解

  3. tf Dataset API

    https://zhuanlan.zhihu.com/p/30751039 https://zhuanlan.zhihu.com/p/37106443 关于其中shuffle时的buffer_size ...

  4. evpp tcpclient

    重点函数讲解①:消息回调函数——void evpp::TCPClient::SetMessageCallback(const evpp::MessageCallback& cb) 注:设置消息 ...

  5. 前端之JavaScript：JS之DOM对象一

    js之DOM对象一 一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 ...

  6. 激活函数：Sigmod&tanh&Softplus&Relu详解

    什么是激活函数? 激活函数(Activation functions)对于人工神经网络模型去学习.理解非常复杂和非线性的函数来说具有十分重要的作用. 它们将非线性特性引入到我们的网络中.其主要目的是将 ...

  7. python装饰器的简单理解

    如果你接触 Python 有一段时间了的话,想必你对 @ 符号一定不陌生了,没错 @ 符号就是装饰器的语法糖. 装饰器的使用方法很固定: 先定义一个装饰函数(帽子)(也可以用类.偏函数实现) 再定义你 ...

  8. pandas、matplotlib、Numpy模块的简单学习

    目录 一.pandas模块 二.matplotlib模块 1.条形图 2. 直方图 3.折线图 4.散点图+直线图 三.numpy 一.pandas模块 pandas是BSD许可的开源库,为Pytho ...

  9. note 2019.12.16

    1.无序 HTML 列表: <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li& ...

  10. 决策树剪枝算法-悲观剪枝算法(PEP)

    前言 在机器学习经典算法中,决策树算法的重要性想必大家都是知道的.不管是ID3算法还是比如C4.5算法等等,都面临一个问题,就是通过直接生成的完全决策树对于训练样本来说是“过度拟合”的,说白了是太精确 ...