css简单布局：

假设一种需求，用一个表格来展示付款数据。下面是我们使用的表格和数据：
<table>
<thead>
<tr>
<th>支付</th>
<th>日期</th>
<th>金额</th>
<th>周期</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="支付">支付 #1</td>
<td data-label="日期">02/01/2015</td>
<td data-label="金额">$2,311</td>
<td data-label="周期">01/01/2015 - 01/31/2015</td>
</tr>
<tr>
<td data-label="支付">支付 #2</td>
<td data-label="日期">03/01/2015</td>
<td data-label="金额">$3,211</td>
<td data-label="周期">02/01/2015 - 02/28/2015</td>
</tr>
</tbody>
</table>

借助伪元素和自定义属性

我们将借助伪元素 :before 和 :after 的力量。通常， 它们用显示图标类的内容，比如一个箭头，提示，或文字图案(icon)。它的另外一个神奇的功能是元素属性值显示到HTML内容里，content: attr(data-label)，放在before/after伪元素类里。沿着这个思路，我们就能够让table在PC端表现成网格效果，而在小屏的手机端表现成流式布局。

我们暂以600px为小屏幕大屏幕的分界点，下面的CSS使用媒体查询语句，在小于600px宽的屏幕上，用CSS将td上的属性值取出来，放到内容区显示。
@media screen and (max-width: 600px) {
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
在大屏幕上的显示效果是这样：

Respo1.png

而到了手机设备上，变成了这样：

Respo2.png

当可视区域的宽度小于600px时，会触发自适应布局设置的条件，表格变成流式布局：你也可以分别在PC和手机上分别测试这个网页。完美的实现了自适应布局的效果。

CSS display属性的表格布局相关属性的解释：

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>）