display:table

CSS display:table 属性详解

最新推荐文章于 2024-11-01 00:18:34 发布

weixin_30770495

最新推荐文章于 2024-11-01 00:18:34 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangyanxia/p/4784856.html

本文详细介绍了CSS中的display:table属性及其相关值，展示了如何利用这些属性创建灵活的表格布局，包括实现块级标签的行内效果、垂直居中等内容。

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>