如何使用純CSS實(shí)現(xiàn)表頭固定效果

這篇文章給大家分享的是有關(guān)如何使用純CSS實(shí)現(xiàn)表頭固定效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

西雙版納ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

純CSS實(shí)現(xiàn)表頭固定之所以難，主要在兩點(diǎn)：

1、占有最大市場份額的IE6不支持position:fixed。

2、人們想破頭都想在一起表格中實(shí)現(xiàn)這種效果。

不過外國真的人用純CSS實(shí)現(xiàn)了這種效果，動(dòng)用了數(shù)量驚人的CSShacks……我覺得，如果搞到代碼如此難懂且難擴(kuò)展，還不如用javascript好了。碰巧今天我也遇到這種需求，換個(gè)視角想想，真的搞出來了。

我們知道，CSS是負(fù)責(zé)表現(xiàn)，HTML是負(fù)責(zé)結(jié)構(gòu)，同樣的結(jié)構(gòu)，換個(gè)樣式，給人的感覺完全不同，這也說明人的眼睛是很容易受騙。因此前些狂熱鼓吹p+CSS的日子里，人們總是想在頁面去掉table，用p+span弄出了一個(gè)個(gè)“table”來。

雖然這種事是不可取，但也告訴我們，table做得的事，通過一些組合我們也能做出來。換個(gè)思路來說，既然一個(gè)table做不了，就兩個(gè)吧。

上面的table模擬表頭，下面的table模擬帶滾動(dòng)條的部分。在我們繼續(xù)講下去之前，我們先明確一下我們的需求吧，要不太抽象了。首先是表格為4*9,每列寬170px,總為680px，滾動(dòng)條在各瀏覽器默認(rèn)為16px，別忘了，width是不包含border在內(nèi)，四列就有5個(gè)縱向的border，寬總長為701px。

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

然后我們把這個(gè)table一分為二，第一個(gè)table為表頭，第二個(gè)table要帶滾動(dòng)條，說明要在其父元素上應(yīng)用overflow樣式，因此它要外套一個(gè)p。這個(gè)p與第一個(gè)table應(yīng)該是等長的。

不過不用花心思了，我們在它們的外面最套一個(gè)p，設(shè)置其width為701px，然后把這兩個(gè)子元素的寬都設(shè)為100%就行了。注意，我們在table中顯式添加tbody以提高表格的渲染效率。

<pid="scrollTable">

<tableclass="thead">

<tbody>

<tr>

</tr>

</tbody>

</table>

<p>

<tableclass="tbody">

<tbody>

<tr>

<td>SimpleattributeSelector</td>

<td>選擇具有此屬性的元素</td>

<td>blockquote[title]{<br/>color:red}</td>

</tr>

<tr>

<td>attributeValueSelector</td>

<td>[attr="value"]</td>

<td>選出屬性值精確等于給出值的元素</td>

<td>h3[align="left"]{<br/>cursor:hand}</td>

</tr>

<tr>

<td>"Begins-with"attributeValueSelector</td>

<td>[attr^="value"]</td>

<td>選出屬性值以給出值開頭的元素</td>

<td>h3[align^="right"]{<br/>cursor:hand}</td>

</tr>

<tr>

<td>"Ends-with"attributeValueSelector</td>

<td>[attr$="value"]</td>

<td>選出屬性值以給出值結(jié)尾的元素</td>

<td>p[class$="vml"]{<br/>cursor:hand}</td>

</tr>

<tr>

<td>Substring-matchattributeValueSelector</td>

<td>[attr*="value"]</td>

<td>選出屬性值包含給出值的元素</td>

<td>p[class*="grid"]{<br/>float:left}</td>

</tr>

<tr>

<td>One-Of-ManyAttributeValueSelector</td>

<td>[attr~="value"]</td>

<td>原元素的屬性值為多個(gè)單詞，給出值為其中一個(gè)。</td>

<td>li[class~="last"]{<br/>padding-left:2em}</td>

</tr>

<tr>

<td>HyphenAttributeValueSelector</td>

<td>[attr|="value"]</td>

<td>原元素的屬性值等于給出值，或者以給出值加“-”開頭</td>

<td>span[lang|="en"]{<br/>color:green}</td>

</tr>

<tr>

<td>反選屬性值選擇器</td>

<td>[attr!="value"]</td>

<td>非標(biāo)準(zhǔn)，jQuery中出現(xiàn)的</td>

<td>span[class!="red"]{<br/>color:green}</td>

</tr>

</tbody>

</table>

</p>

表現(xiàn)層部分：

#scrollTable{

width:701px;

border:1pxsolid#EB8;/*table沒有外圍的border，只有內(nèi)部的td或th有border*/

background:#FF8C00;

}

#scrollTabletable{

border-collapse:collapse;/*統(tǒng)一設(shè)置兩個(gè)table為細(xì)線表格*/

}

#scrollTabletable.thead{/*表頭*/

/*p的第一個(gè)子元素*/

width:100%;

}

#scrollTabletable.theadth{/*表頭*/

border:1pxsolid#EB8;

border-right:#C96;

color:#fff;

background:#FF8C00;/*亮桔黃色*/

}

#scrollTablep{/*能帶滾動(dòng)條的表身*/

/*p的第二個(gè)子元素*/

width:100%;

height:200px;

overflow:auto;/*必需*/

}

#scrollTabletable.tbody{/*能帶滾動(dòng)條的表身的正體*/

width:100%;

border:1pxsolid#C96;

border-right:#B74;

color:#666666;

background:#ECE9D8;

}

#scrollTabletable.tbodytd{/*能帶滾動(dòng)條的表身的格子*/

border:1pxsolid#C96;

}

運(yùn)行代碼：

<!doctypehtml>

<htmldir="ltr"lang="zh-CN">

<head>

<metacharset="utf-8"/>

<title>純CSS實(shí)現(xiàn)表頭固定</title>

<styletype="text/css">

#scrollTable{

width:701px;

border:1pxsolid#EB8;/*table沒有外圍的border，只有內(nèi)部的td或th有border*/

background:#FF8C00;

}

#scrollTabletable{

border-collapse:collapse;/*統(tǒng)一設(shè)置兩個(gè)table為細(xì)線表格*/

}

#scrollTabletable.thead{/*表頭*/

/*p的第一個(gè)子元素*/

width:100%;

}

#scrollTabletable.theadth{/*表頭*/

border:1pxsolid#EB8;

border-right:#C96;

color:#fff;

background:#FF8C00;/*亮桔黃色*/

}

#scrollTablep{/*能帶滾動(dòng)條的表身*/

/*p的第二個(gè)子元素*/

width:100%;

height:200px;

overflow:auto;/*必需*/

}

#scrollTabletable.tbody{/*能帶滾動(dòng)條的表身的正體*/

width:100%;

border:1pxsolid#C96;

border-right:#B74;

color:#666666;

background:#ECE9D8;

}

#scrollTabletable.tbodytd{/*能帶滾動(dòng)條的表身的格子*/

border:1pxsolid#C96;

}

</style>

</head>

<body>

<pid="scrollTable">

<tableclass="thead">

<tbody>

<tr>

</tr>

</tbody>

</table>

<p>

<tableclass="tbody">

<tbody>

<tr>

<td>SimpleattributeSelector</td>

<td>選擇具有此屬性的元素</td>

<td>blockquote[title]{<br/>color:red}</td>

</tr>

<tr>

<td>attributeValueSelector</td>

<td>[attr="value"]</td>

<td>選出屬性值精確等于給出值的元素</td>

<td>h3[align="left"]{<br/>cursor:hand}</td>

</tr>

<tr>

<td>"Begins-with"attributeValueSelector</td>

<td>[attr^="value"]</td>

<td>選出屬性值以給出值開頭的元素</td>

<td>h3[align^="right"]{<br/>cursor:hand}</td>

</tr>

<tr>

<td>"Ends-with"attributeValueSelector</td>

<td>[attr$="value"]</td>

<td>選出屬性值以給出值結(jié)尾的元素</td>

<td>p[class$="vml"]{<br/>cursor:hand}</td>

</tr>

<tr>

<td>Substring-matchattributeValueSelector</td>

<td>[attr*="value"]</td>

<td>選出屬性值包含給出值的元素</td>

<td>p[class*="grid"]{<br/>float:left}</td>

</tr>

<tr>

<td>One-Of-ManyAttributeValueSelector</td>

<td>[attr~="value"]</td>

<td>原元素的屬性值為多個(gè)單詞，給出值為其中一個(gè)。</td>

<td>li[class~="last"]{<br/>padding-left:2em}</td>

</tr>

<tr>

<td>HyphenAttributeValueSelector</td>

<td>[attr|="value"]</td>

<td>原元素的屬性值等于給出值，或者以給出值加“-”開頭</td>

<td>span[lang|="en"]{<br/>color:green}</td>

</tr>

<tr>

<td>反選屬性值選擇器</td>

<td>[attr!="value"]</td>

<td>非標(biāo)準(zhǔn)，jQuery中出現(xiàn)的</td>

<td>span[class!="red"]{<br/>color:green}</td>

</tr>

</tbody>

</table>

</p>

</body>

</html>

發(fā)現(xiàn)表頭的格子與表身的格子不對(duì)齊。這時(shí)我們需要?jiǎng)佑胏ol標(biāo)簽，col允許我們統(tǒng)一設(shè)置tbody中索引值與它相同的td或th的背景色，文字對(duì)齊方式與寬度。雖然CSS2.1的相鄰選擇器與CSS3的子元素過濾偽類能讓我們用更精簡的方式設(shè)置它們，而且是樣式與結(jié)構(gòu)分離那種，可惜IE家族總是拖后腿。我們再看一下它們的長度，由于最后一個(gè)表格有可能受滾動(dòng)條擠壓而縮短長度，我們保證前三列長度相等就行了，剩余的都分配給最后一個(gè)，換言之，最后一個(gè)不用設(shè)置。另，IE下可以設(shè)置滾動(dòng)條的樣式，我們也把玩一翻吧。

<tableclass="thead">

<colwidth="170px"></col><colwidth="170px"></col><colwidth="170px"></col><col></col>

<tbody>

//********************略*****************

</tbody>

</table>

<p>

<tableclass="tbody">

<colwidth="170px"></col><colwidth="170px"></col><colwidth="170px"></col><col></col>

<tbody>

//********************略*****************

</tbody>

</table>

</p>

表現(xiàn)層部分：

#scrollTable{

width:701px;

border:1pxsolid#EB8;/*table沒有外圍的border，只有內(nèi)部的td或th有border*/

background:#FF8C00;

}

#scrollTabletable{

border-collapse:collapse;/*統(tǒng)一設(shè)置兩個(gè)table為細(xì)線表格*/

}

/*表頭p的第一個(gè)子元素**/

#scrollTabletable.thead{

width:100%;

}

/*表頭*/

#scrollTabletable.theadth{

border:1pxsolid#EB8;

border-right:#C96;

color:#fff;

background:#FF8C00;/*亮桔黃色*/

}

/*能帶滾動(dòng)條的表身*/

/*p的第二個(gè)子元素*/

#scrollTablep{

width:100%;

height:200px;

overflow:auto;/*必需*/

scrollbar-face-color:#EB8;/*那三個(gè)小矩形的背景色*/

scrollbar-base-color:#ece9d8;/*那三個(gè)小矩形的前景色*/

scrollbar-arrow-color:#FF8C00;/*上下按鈕里三角箭頭的顏色*/

scrollbar-track-color:#ece9d8;/*滾動(dòng)條的那個(gè)活動(dòng)塊所在的矩形的背景色*/

scrollbar-highlight-color:#800040;/*那三個(gè)小矩形左上padding的顏色*/

scrollbar-shadow-color:#800040;/*那三個(gè)小矩形右下padding的顏色*/

scrollbar-3dlight-color:#EB8;/*那三個(gè)小矩形左上border的顏色*/

scrollbar-darkshadow-Color:#EB8;/*那三個(gè)小矩形右下border的顏色*/

}

/*能帶滾動(dòng)條的表身的正體*/

#scrollTabletable.tbody{

width:100%;

border:1pxsolid#C96;

border-right:#B74;

color:#666666;

background:#ECE9D8;

}

/*能帶滾動(dòng)條的表身的格子*/

#scrollTabletable.tbodytd{

border:1pxsolid#C96;

}

運(yùn)行代碼：

<!doctypehtml>

<htmldir="ltr"lang="zh-CN">

<head>

<metacharset="utf-8"/>

<title>純CSS實(shí)現(xiàn)表頭固定</title>

<styletype="text/css">

#scrollTable{

width:701px;

border:1pxsolid#EB8;/*table沒有外圍的border，只有內(nèi)部的td或th有border*/

background:#FF8C00;

}

#scrollTabletable{

border-collapse:collapse;/*統(tǒng)一設(shè)置兩個(gè)table為細(xì)線表格*/

}

/*表頭p的第一個(gè)子元素**/

#scrollTabletable.thead{

width:100%;

}

/*表頭*/

#scrollTabletable.theadth{

border:1pxsolid#EB8;

border-right:#C96;

color:#fff;

background:#FF8C00;/*亮桔黃色*/

}

/*能帶滾動(dòng)條的表身*/

/*p的第二個(gè)子元素*/

#scrollTablep{

width:100%;

height:200px;

overflow:auto;/*必需*/

scrollbar-face-color:#EB8;/*那三個(gè)小矩形的背景色*/

scrollbar-base-color:#ece9d8;/*那三個(gè)小矩形的前景色*/

scrollbar-arrow-color:#FF8C00;/*上下按鈕里三角箭頭的顏色*/

scrollbar-track-color:#ece9d8;/*滾動(dòng)條的那個(gè)活動(dòng)塊所在的矩形的背景色*/

scrollbar-highlight-color:#800040;/*那三個(gè)小矩形左上padding的顏色*/

scrollbar-shadow-color:#800040;/*那三個(gè)小矩形右下padding的顏色*/

scrollbar-3dlight-color:#EB8;/*那三個(gè)小矩形左上border的顏色*/

scrollbar-darkshadow-Color:#EB8;/*那三個(gè)小矩形右下border的顏色*/

}

/*能帶滾動(dòng)條的表身的正體*/

#scrollTabletable.tbody{

width:100%;

border:1pxsolid#C96;

border-right:#B74;

color:#666666;

background:#ECE9D8;

}

/*能帶滾動(dòng)條的表身的格子*/

#scrollTabletable.tbodytd{

border:1pxsolid#C96;

}

</style>

</head>

<body>

<pid="scrollTable">

<tableclass="thead">

<colwidth="170px"></col><colwidth="170px"></col><colwidth="170px"></col><col></col>

<tbody>

<tr>

</tr>

</tbody>

</table>

<p>

<tableclass="tbody">

<colwidth="170px"></col><colwidth="170px"></col><colwidth="170px"></col><col></col>

<tbody>

<tr>

<td>SimpleattributeSelector</td>

<td>選擇具有此屬性的元素</td>

<td>blockquote[title]{<br/>color:red}</td>

</tr>

<tr>

<td>attributeValueSelector</td>

<td>[attr="value"]</td>

<td>選出屬性值精確等于給出值的元素</td>

<td>h3[align="left"]{<br/>cursor:hand}</td>

</tr>

<tr>

<td>"Begins-with"attributeValueSelector</td>

<td>[attr^="value"]</td>

<td>選出屬性值以給出值開頭的元素</td>

<td>h3[align^="right"]{<br/>cursor:hand}</td>

</tr>

<tr>

<td>"Ends-with"attributeValueSelector</td>

<td>[attr$="value"]</td>

<td>選出屬性值以給出值結(jié)尾的元素</td>

<td>p[class$="vml"]{<br/>cursor:hand}</td>

</tr>

<tr>

<td>Substring-matchattributeValueSelector</td>

<td>[attr*="value"]</td>

<td>選出屬性值包含給出值的元素</td>

<td>p[class*="grid"]{<br/>float:left}</td>

</tr>

<tr>

<td>One-Of-ManyAttributeValueSelector</td>

<td>[attr~="value"]</td>

<td>原元素的屬性值為多個(gè)單詞，給出值為其中一個(gè)。</td>

<td>li[class~="last"]{<br/>padding-left:2em}</td>

</tr>

<tr>

<td>HyphenAttributeValueSelector</td>

<td>[attr|="value"]</td>

<td>原元素的屬性值等于給出值，或者以給出值加“-”開頭</td>

<td>span[lang|="en"]{<br/>color:green}</td>

</tr>

<tr>

<td>反選屬性值選擇器</td>

<td>[attr!="value"]</td>

<td>非標(biāo)準(zhǔn)，jQuery中出現(xiàn)的</td>

<td>span[class!="red"]{<br/>color:green}</td>

</tr>

</tbody>

</table>

</p>

</body>

</html>

如何使用純CSS實(shí)現(xiàn)表頭固定效果

感謝各位的閱讀！關(guān)于“如何使用純CSS實(shí)現(xiàn)表頭固定效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章標(biāo)題：如何使用純CSS實(shí)現(xiàn)表頭固定效果
本文地址：http://www.muchs.cn/article0/ghosoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、軟件開發(fā)、網(wǎng)站改版、ChatGPT、網(wǎng)站導(dǎo)航、

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

猜你還喜歡下面的內(nèi)容