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样式表格
这个样式和和上面的差不多,只是多了背景图,的视觉上会好看不少。
源代码:
Info Header 1 Info Header 2 Info Header 3 Text 1A Text 1B Text 1C Text 2A Text 2B Text 2C
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. 鼠标悬停高亮的CSS样式表格 (需要JS)
纯CSS显示表格高亮在IE中显示有问题,所以这边使用了JS来做高亮。
注意:不要定义格子的背景色。
源代码:
Info Header 1 Info Header 2 Info Header 3
onmouseout='this.style.backgroundColor='#d4e3e5';'>Item 1A Item 1B Item 1C
onmouseout='this.style.backgroundColor='#d4e3e5';'>Item 2A Item 2B Item 2C
onmouseout='this.style.backgroundColor='#d4e3e5';'>Item 3A Item 3B Item 3C
onmouseout='this.style.backgroundColor='#d4e3e5';'>Item 4A Item 4B Item 4C
onmouseout='this.style.backgroundColor='#d4e3e5';'>Item 5A Item 5B Item 5C
以上就是今天为大家推荐的几种比较常见和常用的CSS表格样式了,希望大家喜欢。
联系客服