如何製作一個響應式的HTML5表格

前段時間在網上看到了一個老外寫的一個HTML5響應式表格效果，它的CSS程式碼用SASS寫的，有許多重複的data屬性。我們這裡改進一下他的程式碼，解決一下他寫的不好的地方。

檢視演示  下載地址

前段時間在網上看到了一個老外寫的一個HTML5響應式表格效果，它的CSS程式碼用SASS寫的，有許多重複的data屬性。我們這裡改進一下他的程式碼，解決一下他寫的不好的地方。要看到本例的響應式表格效果，瀏覽器要縮放到小於600畫素的大小。HTML結構如下：

<tableid="miyazaki">
<caption>The Films of Miyazaki</caption>
<thead>
<tr><th>Film<th>Year<th>Honor
<tbody>
<tr>
<tddata-th="Film">My Neighbor Totoro
<tddata-th="Year">1988
<tddata-th="Honor">Blue Ribbon Award (Special)
<tr>
<tddata-th="Film">Princess Mononoke
<tddata-th="Year">1997
<tddata-th="Honor">Nebula Award (Best Script)
<tr>
<tddata-th="Film">Spirited Away
<tddata-th="Year">2001
<tddata-th="Honor">Academy Award (Best Animated Feature)
<tr>
<tddata-th="Film">Howl’s Moving Castle
<tddata-th="Year">2004
<tddata-th="Honor">Hollywood Film Festival (Animation OTY)
</table>

注意程式碼中的data屬性，每一個單元格的data屬性都與表格的header相對應。

CSS樣式

表格基本的CSS樣式如下：

table#miyazakicaption{
font-size:2rem;color:#444;
margin:1rem;
background-image:url(miyazaki.png),url(miyazaki2.png);
background-size: contain;
background-repeat:no-repeat;
background-position:centerleft,centerright;
}
table#miyazaki {
border-collapse:collapse;
font-family: Agenda-Light;font-weight:100;
background:#333;color:#fff;
text-rendering:optimizeLegibility;
border-radius:5px;
}
table#miyazaki thead th {font-weight:600; }
table#miyazaki thead th, table#miyazaki tbody td {
padding: .8rem;font-size:1.4rem;
}
table#miyazaki tbody td {
padding: .8rem;font-size:1.4rem;
color:#444;background:#eee;
}
table#miyazaki tbody tr:not(:last-child) {
border-top:1pxsolid#ddd;
border-bottom:1pxsolid#ddd;
}

下面是響應式表格的CSS程式碼：

@mediascreenand (max-width:600px) {
table#miyazakicaption{background-image:none; }
table#miyazaki thead {display:none; }
table#miyazaki tbody td {display:block;padding: .6rem; }
table#miyazaki tbody tr td:first-child {background:#333;color:#fff; }
table#miyazaki tbody td:before {
content:attr(data-th);font-weight:bold;
display:inline-block;width:6rem;
}
}

media query程式碼中隱藏表格的頭部單元，並且將每一個單元格的data-th作為標籤顯示在單元格內容的前面。每一行的第一個單元格都設定了特別的背景色和前景色，使之更為清晰。

擴充套件

你現在可以縮放瀏覽器來看看效果，非常不錯。但是上面的程式碼是不可擴充套件的：要新增一個新行必須手動為每個單元格新增一個data-th屬性。要想做到自動化，可以在伺服器端實現，如PHP。也可以通過javascript來實現它。

首先，將整個表格都進行簡化：

<tableid="miyazaki">
<caption>The Films of Hayao Miyazaki</caption>
<thead>
<tr><th>Film<th>Year<th>Honor
<tbody>
<tr>
<td>My Neighbor Totoro
<td>1988
<td>Blue Ribbon Award (Special)
<tr>
<td>Princess Mononoke
<td>1997
<td>Nebula Award (Best Script)
<tr>
<td>Spirited Away
<td>2001
<td>Academy Award (Best Animated Feature)
<tr>
<td>Howl’s Moving Castle
<td>2004
<td>Hollywood Film Festival (Animation OTY)
</table>

然後在文件的底部新增下面的javascript程式碼：

<script>
varheadertext = [];
varheaders = document.querySelectorAll("#miyazaki th"),
tablerows = document.querySelectorAll("#miyazaki th"),
tablebody = document.querySelector("#miyazaki tbody");
for(vari = 0; i < headers.length; i++) {
varcurrent = headers[i];
headertext.push( current.textContent.replace( /\r?\n|\r/,"") );
}
for(vari = 0, row; row = tablebody.rows[i]; i++) {
for(varj = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[j]);
} }
</script>

上面的程式碼的意思是：獲取每一個<th>中的文字內容，然後分別剔除它們的回車和換行符。然後將這些文字分別新增到適當的單元格的data屬性上，新增的規則與CSS樣式的規則相一致。（使用setAttribute要比dataset要好，後者只有在IE 11中得到支援。）

到此，這個HTML5響應式表格就完成了。