用CSS制作表頭固定的表格

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

要解決這個(gè)問(wèn)題，通常我們會(huì)想到使用框架或者內(nèi)置框架（iframe）的方式，將表頭內(nèi)容放在上方的框架頁(yè)面中，表格內(nèi)容放在下面的框架中，這樣瀏覽起來(lái)就比較方便了?？墒?，使用框架并不是很好的選擇。

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

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

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

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

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

行一 列一 行二 列二

接下來(lái)呢，我們?cè)谏厦孢@個(gè)表格的第一行的單元格內(nèi)嵌入作為表頭的表格，如下：

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

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

下面，我們?cè)谙乱恍校簿褪恰靶卸?列二”所在的單元格中，加入一塊（DIV），此塊內(nèi)包含了一個(gè)以表格排列的數(shù)據(jù)。注意這里塊（DIV）的CSS設(shè)置：overflow:auto。它是說(shuō)在內(nèi)容超出塊的情況下，自動(dòng)顯示滾動(dòng)條。另外，這里的單元格填充大小可以自行設(shè)定，如果為“0”，你可能會(huì)發(fā)現(xiàn)上下沒(méi)有對(duì)齊，此時(shí)你可以適當(dāng)加大單元格填充。話代碼如下：

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

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

商場(chǎng)本月銷售統(tǒng)計(jì)表 商品名 上旬 中旬 下旬 洗潔精 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制作下拉導(dǎo)航菜單實(shí)例代碼 ·div+css實(shí)現(xiàn)圓角邊框 ·用CSS的float和clear創(chuàng)建三欄液態(tài)布局的方法 ·CSS制作帶陰影的網(wǎng)站導(dǎo)航代碼 ·30多個(gè)CSS滑動(dòng)門菜單效果 ·CSS讓圖片垂直居中和底端對(duì)齊的代碼 ·Div+CSS布局入門教程 ·使用CSS處理表格邊框樣式化 ·CSS實(shí)現(xiàn)表格邊框陰影和背景漸變效果 ·CSS教程:用dl dt dd來(lái)制作列表 ·CSS：鼠標(biāo)經(jīng)過(guò)時(shí)改變背景顏色或圖片 ·CSS+DIV+Javascript制作滑動(dòng)門菜單技術(shù) ·強(qiáng)烈推薦：30余個(gè)CSS導(dǎo)航菜單效果 ·CSS網(wǎng)頁(yè)布局全精通 分享到: 0

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

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

本文題目：用CSS制作表頭固定的表格
標(biāo)題路徑：http://m.kartarina.com/news30/310930.html

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

廣告

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