table 样式美化

1. 单像素边框CSS表格

这是一个很常用的表格样式。

 

源代码：

 1 
 2 
26 
27 
28 
29 
30     
31 
32 
33     
34 
35 
36     
37 
38 
Info Header 1
Info Header 2
Info Header 3
Text 1A
Text 1B
Text 1C
Text 2A
Text 2B
Text 2C

2. 带背景图的CSS样式表格

和上面差不多，不过每个格子里多了背景图。

 

cell-blue.jpg

cell-grey.jpg

 

1. 下载上面两张图，命名为cell-blue.jpg和cell-grey.jpg

2. 拷贝下面的代码到你想要的地方，记得修改图片url

 1 
 2 
26 
27 
28 
29 
30     
31 
32 
33     
34 
35 
36     
37 
38 
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样式表格自动切换每一行的颜色，在我们需要频繁更新一个大表格的时候很有用。

 

代码：

 1 
 2 
23 
24 
25 
26 
54 
55 
56 
57 
58 
59     
60 
61 
62     
63 
64 
65     
66 
67 
68 
69     
70 
71 
72     
73 
74 
75     
76 
77 
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
78 
79 

4. 鼠标悬停高亮的CSS样式表格 (需要JS)

纯CSS显示表格高亮在IE中显示有问题，所以这边使用了js来做高亮（由于csdn博客限制了js的使用，我会在近期将博客迁移放到自己的web主机上）。

 

有一点要小心的是，不要定义格子的背景色。

 1 
 2 
28 
29 
30 
31 
32     
33 
34 
35     
36 
37 
38     
39 
40 
41     
42 
43 
44     
45 
46 
47     
48 
49 
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

 

转载于:https://www.cnblogs.com/borter/p/9480211.html