溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹怎么用純CSS實(shí)現(xiàn)表頭固定，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
我們知道，CSS是負(fù)責(zé)表現(xiàn)，HTML是負(fù)責(zé)結(jié)構(gòu)，同樣的結(jié)構(gòu)，換個樣式，給人的感覺完全不同，這也說明人的眼睛是很容易受騙。因此前些狂熱鼓吹p+CSS的日子里，人們總是想在頁面去掉table，用p+span弄出了一個個“table”來。雖然這種事是不可取，但也告訴我們，table做得的事，通過一些組合我們也能做出來。換個思路來說，既然一個table做不了，就兩個吧。上面的table模擬表頭，下面的table模擬帶滾動條的部分。在我們繼續(xù)講下去之前，我們先明確一下我們的需求吧，要不太抽象了。首先是表格為4*9,每列寬170px,總為680px，滾動條在各瀏覽器默認(rèn)為16px，別忘了，width是不包含border在內(nèi)，四列就有5個縱向的border，寬總長為701px。
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
然后我們把這個table一分為二，第一個table為表頭，第二個table要帶滾動條，說明要在其父元素上應(yīng)用overflow樣式，因此它要外套一個p。這個p與第一個table應(yīng)該是等長的。不過不用花心思了，我們在它們的外面最套一個p，設(shè)置其width為701px，然后把這兩個子元素的寬都設(shè)為100%就行了。注意，我們在table中顯式添加tbody以提高表格的渲染效率。
<pid="scrollTable">
<tableclass="thead">
<tbody>
<tr>
<th>名稱</th>
<th>語法</th>
<th>說明</th>
<th>例子</th>
</tr>
</tbody>
</table>
<p>
<tableclass="tbody">
<tbody>
<tr>
<td>SimpleattributeSelector</td>
<td>[attr]</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>原元素的屬性值為多個單詞，給出值為其中一個。</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>
</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è)置兩個table為細(xì)線表格*/
}
#scrollTabletable.thead{/*表頭*/
/*p的第一個子元素*/
width:100%;
}
#scrollTabletable.theadth{/*表頭*/
border:1pxsolid#EB8;
border-right:#C96;
color:#fff;
background:#FF8C00;/*亮桔黃色*/
}
#scrollTablep{/*能帶滾動條的表身*/
/*p的第二個子元素*/
width:100%;
height:200px;
overflow:auto;/*必需*/
}
#scrollTabletable.tbody{/*能帶滾動條的表身的正體*/
width:100%;
border:1pxsolid#C96;
border-right:#B74;
color:#666666;
background:#ECE9D8;
}
#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è)置兩個table為細(xì)線表格*/
}
#scrollTabletable.thead{/*表頭*/
/*p的第一個子元素*/
width:100%;
}
#scrollTabletable.theadth{/*表頭*/
border:1pxsolid#EB8;
border-right:#C96;
color:#fff;
background:#FF8C00;/*亮桔黃色*/
}
#scrollTablep{/*能帶滾動條的表身*/
/*p的第二個子元素*/
width:100%;
height:200px;
overflow:auto;/*必需*/
}
#scrollTabletable.tbody{/*能帶滾動條的表身的正體*/
width:100%;
border:1pxsolid#C96;
border-right:#B74;
color:#666666;
background:#ECE9D8;
}
#scrollTabletable.tbodytd{/*能帶滾動條的表身的格子*/
border:1pxsolid#C96;
}
</style>
</head>
<body>
<pid="scrollTable">
<tableclass="thead">
<tbody>
<tr>
<th>名稱</th>
<th>語法</th>
<th>說明</th>
<th>例子</th>
</tr>
</tbody>
</table>
<p>
<tableclass="tbody">
<tbody>
<tr>
<td>SimpleattributeSelector</td>
<td>[attr]</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>原元素的屬性值為多個單詞，給出值為其中一個。</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>
</p>
</body>
</html>
以上是“怎么用純CSS實(shí)現(xiàn)表頭固定”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
