css簡(jiǎn)單布局：

假設(shè)一種需求，用一個(gè)表格來(lái)展示付款數(shù)據(jù)。下面是我們使用的表格和數(shù)據(jù)：
<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 的力量。通常， 它們用顯示圖標(biāo)類(lèi)的內(nèi)容，比如一個(gè)箭頭，提示，或文字圖案(icon)。它的另外一個(gè)神奇的功能是元素屬性值顯示到HTML內(nèi)容里，content: attr(data-label)，放在before/after偽元素類(lèi)里。沿著這個(gè)思路，我們就能夠讓table在PC端表現(xiàn)成網(wǎng)格效果，而在小屏的手機(jī)端表現(xiàn)成流式布局。

我們暫以600px為小屏幕大屏幕的分界點(diǎn)，下面的CSS使用媒體查詢(xún)語(yǔ)句，在小于600px寬的屏幕上，用CSS將td上的屬性值取出來(lái)，放到內(nèi)容區(qū)顯示。
@media screen and (max-width: 600px) {
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
在大屏幕上的顯示效果是這樣：

Respo1.png

而到了手機(jī)設(shè)備上，變成了這樣：

Respo2.png

當(dāng)可視區(qū)域的寬度小于600px時(shí)，會(huì)觸發(fā)自適應(yīng)布局設(shè)置的條件，表格變成流式布局：你也可以分別在PC和手機(jī)上分別測(cè)試這個(gè)網(wǎng)頁(yè)。完美的實(shí)現(xiàn)了自適應(yīng)布局的效果。

CSS display屬性的表格布局相關(guān)屬性的解釋?zhuān)?/h1>

table 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類(lèi)似 <table>），表格前后帶有換行符。
table-row-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 <tbody>）。
table-header-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 <thead>）。
table-footer-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 <tfoot>）。
table-row 此元素會(huì)作為一個(gè)表格行顯示（類(lèi)似 <tr>）。
table-column-group 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類(lèi)似 <colgroup>）。
table-column 此元素會(huì)作為一個(gè)單元格列顯示（類(lèi)似 <col>）
table-cell 此元素會(huì)作為一個(gè)表格單元格顯示（類(lèi)似 <td> 和 <th>）
table-caption 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類(lèi)似 <caption>）