網站制作：用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>

之后呢，把它嵌入到最外面那個表格的第二行的單元格內，結果如下：

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

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

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

posted on 2007-04-29 14:45 deepbluesea 閱讀(435) 評論(0)  編輯  收藏 所屬分類: 網站制作