網(wǎng)頁制作中，通常用表格來以行和列的方式來組織數(shù)據(jù)?？赡茉谑褂弥袝龅竭@種情況，我們所要列出的數(shù)據(jù)很多很長。這時候，瀏覽起來就很不方便，察看后面數(shù)據(jù)的時候不得不經(jīng)常滾動到頁面的上方來看看對應的表頭。

要解決這個問題，通常我們會想到使用框架或者內(nèi)置框架（iframe）的方式，將表頭內(nèi)容放在上方的框架頁面中，表格內(nèi)容放在下面的框架中，這樣瀏覽起來就比較方便了?？墒牵褂每蚣懿⒉皇呛芎玫倪x擇。

這里介紹一個更好的方法，使用簡單的CSS就能夠?qū)崿F(xiàn)表頭固定的表格（在IE和Firefox、Mozilla下通過）。

這個方法是通過在一個兩行一列的表格中，上面一行放置作為表頭的表格，下面一行放置一個滾動的Div塊，塊里面內(nèi)置有包含數(shù)據(jù)內(nèi)容的表格。具體做法如下：

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

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

此表格的結(jié)果如下：

行一 列一 行二 列二

接下來呢，我們在上面這個表格的第一行的單元格內(nèi)嵌入作為表頭的表格，如下：

<table summary="" cellpadding="0" cellspacing="0" width="100%"> <tr> <td colspan="5" align="center">商場本月銷售統(tǒng)計表</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>

我們看到的結(jié)果如下：

商場本月銷售統(tǒng)計表 商品名 上旬 中旬 下旬 行二 列二 作為表頭的表格的最后一個單元格，內(nèi)容為空。留空的原因，是因為將來在下面的數(shù)據(jù)內(nèi)容中，會出現(xiàn)滾動條，它也是占據(jù)一定的大小的，為了上下對齊，這里就考慮留空了。

下面，我們在下一行，也就是“行二 列二”所在的單元格中，加入一塊（DIV），此塊內(nèi)包含了一個以表格排列的數(shù)據(jù)。注意這里塊（DIV）的CSS設(shè)置：overflow:auto。它是說在內(nèi)容超出塊的情況下，自動顯示滾動條。另外，這里的單元格填充大小可以自行設(shè)定，如果為“0”，你可能會發(fā)現(xiàn)上下沒有對齊，此時你可以適當加大單元格填充。話代碼如下：

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

之后呢，把它嵌入到最外面那個表格的第二行的單元格內(nèi)，結(jié)果如下：

商場本月銷售統(tǒng)計表 商品名 上旬 中旬 下旬 洗潔精 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

·CSS制作下拉導航菜單實例代碼 ·div+css實現(xiàn)圓角邊框 ·用CSS的float和clear創(chuàng)建三欄液態(tài)布局的方法 ·CSS制作帶陰影的網(wǎng)站導航代碼 ·30多個CSS滑動門菜單效果 ·CSS讓圖片垂直居中和底端對齊的代碼 ·Div+CSS布局入門教程 ·使用CSS處理表格邊框樣式化 ·CSS實現(xiàn)表格邊框陰影和背景漸變效果 ·CSS教程:用dl dt dd來制作列表 ·CSS：鼠標經(jīng)過時改變背景顏色或圖片 ·CSS+DIV+Javascript制作滑動門菜單技術(shù) ·強烈推薦：30余個CSS導航菜單效果 ·CSS網(wǎng)頁布局全精通 分享到: 0

欄目導航 Dreamweaver JavaScript 網(wǎng)頁配色 html教程 網(wǎng)頁制作 SEO技術(shù) FrontPage 建站經(jīng)驗 網(wǎng)賺教程 相關(guān)文章 ·巧妙利用CSS自定義網(wǎng)頁下劃線樣式 ·用CSS控制網(wǎng)頁總體風格 ·用CSS輕松實現(xiàn)網(wǎng)上填空 ·用CSS實現(xiàn)鼠標單擊特效 ·CSS樣式表高效使用的技巧 ·深入了解CSS的繼承性及其應用 ·用 iframe 解決下拉框與層之沖突 ·有關(guān)表格邊框的css語法整理 ·樣式表在web標準應用存在的問題 ·css布局中的居中問題 ·巧用CSS的Border屬性 ·如何用css設(shè)置網(wǎng)頁字體

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

本文題目：用CSS制作表頭固定的表格
標題路徑：http://jinyejixie.com/news30/310930.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、虛擬主機、云服務(wù)器、網(wǎng)站導航、動態(tài)網(wǎng)站、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)