2023年12月6日發(fā)(作者:電流表)
四個好看的CSS樣式表格
1. 單像素邊框CSS表格
這是一個很常用的表格樣式。
:
| Info Header 1 | Info Header 2 | Info Header 3 |
|---|---|---|
| Text 1A | Text 1B | Text 1C |
| Text 2A | Text 2B | Text 2C |
2. 帶背景圖的CSS樣式表格
和上面差不多,不過每個格子里多了背景圖。
1. 下載上面兩張圖,命名為和
2. 拷貝下面的代碼到你想要的地方,記得修改圖片url
| Info Header 1 | Info Header 2 | Info Header 3 |
|---|---|---|
| Text 1A | Text 1B | Text 1C |
| Text 2A | Text 2B | Text 2C |
| Text 3A | Text 3B | Text 3C |
| Text 4A | Text 4B | Text 4C |
| Text 5A | Text 5B | Text 5C |
3. 自動換整行顏色的CSS樣式表格(需要用到JS)
這個CSS樣式表格自動切換每一行的顏色,在我們需要頻繁更新一個大表格的時候很有用。
代碼:
| Info Header 1 | Info Header 2 | Info Header 3 |
|---|---|---|
| Text 1A | Text 1B | Text 1C |
| Text 2A | Text 2B | Text 2C |
| Text 3A | Text 3B | Text 3C |
| Text 4A | Text 4B | Text 4C |
| Text 5A | Text 5B | Text 5C |
4. 鼠標(biāo)懸停高亮的CSS樣式表格 (需要JS)
純CSS顯示表格高亮在IE中顯示有問題,所以這邊使用了JS來做高亮(由于csdn博客限制了js的使用,我會在近期將博客遷移放到自己的
web主機上)。
有一點要小心的是,不要定義格子的背景色。
| Info Header 1 | Info Header 2 | Info Header 3 |
|---|---|---|
| Item 1A | Item 1B | Item 1C |
| Item 2A | Item 2B | Item 2C |
| Item 3A | Item 3B | Item 3C |
| Item 4A | Item 4B | Item 4C |
| Item 5A | Item 5B | Item 5C |
最常見的幾種CSS樣式表格都在這了,希望對大家有幫助
本文發(fā)布于:2023-12-06 16:38:36,感謝您對本站的認(rèn)可!
本文鏈接:http://m.newhan.cn/zhishi/a/88/39098.html
版權(quán)聲明:本站內(nèi)容均來自互聯(lián)網(wǎng),僅供演示用,請勿用于商業(yè)和其他非法用途。如果侵犯了您的權(quán)益請與我們聯(lián)系,我們將在24小時內(nèi)刪除。
本文word下載地址:四個好看的CSS樣式表格.doc
本文 PDF 下載地址:四個好看的CSS樣式表格.pdf
| 留言與評論(共有 0 條評論) |