用CSS製作表頭固定的表格

css

網頁製作中，通常用表格來以行和列的方式來組織資料。可能在使用中會遇到這種情況，我們所要列出的資料很多很長。這時候，瀏覽起來就很不方便，察看後面資料的時候不得不經常滾動到頁面的上方來看看對應的表頭。

要解決這個問題，通常我們會想到使用架構或者內建架構（iframe）的方式，將表頭內容放在上方的架構頁面中，表格內容放在下面的架構中，這樣瀏覽起來就比較方便了。可是，使用架構並不是很好的選擇。

這裡介紹一個更好的方法，使用簡單的CSS就能夠實現表頭固定的表格（在IE和Firefox、Mozilla下通過）。

這個方法是通過在一個兩行一列的表格中，上面一行放置作為表頭的表格，下面一行放置一個滾動的Div塊，塊裡面內建有包含資料內容的表格。具體做法如下：

首先，我們製作一個表格，只包含兩行一列：

<table summary="" cellpadding="0" cellspacing="0" align="center" title="" width="400">
<tr>
<td>行一 列一</td>
</tr>
<tr>
<td>行二 列二</td>
</tr>
</table>

此表格的結果如下：

行一 列一

行二 列二

接下來呢，我們在上面這個表格的第一行的儲存格內嵌入作為表頭的表格，如下：

<table summary="" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="5" align="center">商場本月銷售統計表</td>
</tr>
<tr>
<td width="24%">商品名</td>
<td width="24%">上旬</td>
<td width="24%">中旬</td>
<td width="24%">下旬</td>
<td width="4%">  </td>
</tr>
</table>

我們看到的結果如下：

商場本月銷售統計表 商品名 上旬 中旬 下旬

行二 列二

作為表頭的表格的最後一個儲存格，內容為空白。留空的原因，是因為將來在下面的資料內容中，會出現捲軸，它也是佔據一定的大小的，為了上下對齊，這裡就考慮留空了。

下面，我們在下一行，也就是“行二 列二”所在的儲存格中，加入一塊（DIV），此塊內包含了一個以表格排列的資料。注意這裡塊（DIV）的CSS設定：overflow:auto。它是說在內容超出塊的情況下，自動顯示捲軸。另外，這裡的儲存格填補值大小可以自行設定，如果為“0”，你可能會發現上下沒有對齊，此時你可以適當加大儲存格填補值。話代碼如下：

<div style="height:150px; overflow: auto;">
<table summary="" cellpadding="12" cellspacing="0" width="96%">
<tr>
<td width="25%">洗潔精</td>
<td width="25%">2321</td>
<td width="25%">4521</td>
<td width="25%">1203</td>
</tr>
<tr>
<td width="25%">高錄潔</td>
<td width="25%">1652</td>
<td width="25%">2541</td>
<td width="25%">3652</td>
</tr>
.
.
.
</table>
<div>

之後呢，把它嵌入到最外面那個表格的第二行的儲存格內，結果如下：

　

商場本月銷售統計表 商品名 上旬 中旬 下旬

洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652

接下來，把這個表格美化一下，就可以看到下面這個不錯的表頭固定、資料可滾動的特殊表格了：

　

商場本月銷售統計表 商品名 上旬 中旬 下旬

洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652 洗潔精 2321 4521 1203 高錄潔 1652 2541 3652

這個例子的關鍵在於表格中內嵌了屬性為overflow:auto的DIV。熟悉CSS的都應該知道，overflow還可以設定為scroll的值，也就是overflow:scroll，它的作用是讓DIV在需要的時候，垂直方向和水平方向都加上捲軸。

利用這個特點，我們同樣可以製作左邊固定，而右邊滾動的資料表格出來。