css display table-cell
css display table-cell
display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。
下面是所有值的用法描述。display本身意思是“显示、阵列”的意思值 描述
none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。
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>） inherit 规定应该从父元素继承 display 属性的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.table{
display:table;
}
.tr{
display:table-row;
width:200px;
height:200px;
}
.td{
display:table-cell;
width:100px;
height:100px;
background-color:green;
border:1px solid red;
}
tr{
width:200px;
height:200px;
}
td{
width:100px;
height:100px;
background-color:green;
border:1px solid red;
}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
<br/>
<table cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>从以上代码的表现来看，为div添加了相关属性值之后，差不多完全具有了表格的相关特性，当然上面的演示并不能够完全说明表格所具有的相关特性，以上代码只是说明三个属性值的作用。到这里可能会有朋友提出这样的疑问:在众多的实际应用中并没有完整的定义类似表格这样的层次关系，而是往往只有display:table-cell，这是因为，如果一个对象具有display:table-cell，而它的父元素和祖父元素没有定义display:table-row和display:table-cell,那么就会匿名的创建这两个父元素，尽管外观没有任何变化。代码实例如下:
.parent{
width:200px;
height:200px;
background-color:green;
display:table-cell;
vertical-align:middle;
}
.children{
width:60px;
height:60px;
background-color:red;
font-size:12px;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">蚂蚁部落</div>
</div> 以上代码中，父元素中具有display:table-cell，但是它并没有父元素或者祖父元素定义display:table-row和display:table-cell。这个时候就会匿名创建两个具有此属性的对象，当然外观是看不出来的。以上代码中之所以子元素可以垂直居中对齐，是因为td元素具有valign属性，而vertical-align:middle只会在具有valign属性的对象中生效，所以上面代码就成功实现了垂直居中效果。在兼容各个浏览器的位置高度div垂直居中效果中，middle对象中使用了display:table-cell，它的父对象parent中也显示声明了display:table-cell，否则会匿名创建两个具有此属性的对象，middle对象的尺寸就会根据内容自适应了，这样在标准浏览器中就不能达到垂直居中效果了。
既然是这样，那么我们就可以拿这个货来作等高布局：
[html] view plain copy
- <style type="text/css">
- .classtd{padding:10px; margin:10px; border:1px solid #ccc; vertical-align: top;}
- .classtd{display:table-cell; border-color:#cc0;}
- </style>
- <div class="classtd">
- <p>大人。<br />其实我觉得大家别问元芳，元芳不是神人，<br />也不会武功，也许还是个智障，<br />我就不信我在这里黑元芳<br />他会突然飞檐走壁来到我身后<br />把我的头按在键盘上yu7jhklhgjkfgt;/.";. yujh bnujm798u7jrtb5 tq1qwsewrt5
- </p>
- </div>
- <div class="classtd"><p>我和左边等高</p></div>
把这货和vertical-align：middle搞在一起可以进行大小不固定元素的垂直居中布局（还有多行文本垂直居中）：
[html] view plain copy
- <style type="text/css">
- .classtd{ display: table-cell; padding:10px;margin:10px;border:1px solid #ccc;}
- .classtd div{ display: inline-block; vertical-align: middle;}
- </style>
- <div class="classtd">
- <div style="padding:40px 80px 10px 10px; background: #639146; color:#fff;">div+css</div>
- <div style="padding:60px 80px 10px 10px; background: #2B82EE; color:#fff;">javascript</div>
- <div style="padding:70px 80px 10px 10px; background: #F57900; color:#fff;">HTML5</div>
- <div style="padding:80px 80px 10px 10px; background: #BC1D49; color:#fff;">CSS3</div>
- </div>
利用列宽度自动调节这个特点可以作左固定右自适应布局：
[html] view plain copy
- <style type="text/css">
- .left{float:left; width:260px; padding:10px; margin-right:10px; border:1px solid #ccc;}
- .classtd{ display: table-cell; width:3000px; padding:10px; border:1px solid #ccc;}
- </style>
- <div class="left">我是左边栏目</div>
- <div class="classtd">
- 我是自适应的右边
- </div>
有童鞋可能会对这个布局中的width:3000px感到迷惑。布局的原理
display:table-cell 元素生成的匿名table默认table-layout:auto。宽度将基于单元格内容自动调整。所以设置width:3000px的用途是尽可能的宽的意思。这样就可以达到自适应的效果。