大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
1
2
3
4
5
html 简单的table样式
6
7 /*gridtable*/
8 table.gridtable{
9 font-family:verdana,arial,sans-serif;
10 font-size:11px;
11 color:#333333;
12 border-width:1px;
13 border-color:#666666;
14 border-collapse:collapse;
15 }
16 table.gridtable th{
17 border-width:1px;
18 padding:8px;
19 border-style:solid;
20 border-color:#666666;
21 background-color:#dedede;
22 }
23 table.gridtable td{
24 border-width:1px;
25 padding:8px;
26 border-style:solid;
27 border-color:#666666;
28 background-color:#ffffff;
29 }
30 /*/gridtable*/
31
32 /*imagetable*/
33 table.imagetable{
34 font-family:verdana,arial,sans-serif;
35 font-size:11px;
36 color:#333333;
37 border-width:1px;
38 border-color:#999999;
39 border-collapse:collapse;
40 }
41 table.imagetable th{
42 background:#b5cfd2 url(‘cell-blue.jpg‘);
43 border-width:1px;
44 padding:8px;
45 border-style:solid;
46 border-color:#999999;
47 }
48 table.imagetable td{
49 background:#dcddc0 url(‘cell-grey.jpg‘);
50 border-width:1px;
51 padding:8px;
52 border-style:solid;
53 border-color:#999999;
54 }
55 /*/imagetable*/
56 /*altrowstable*/
57
58 table.altrowstable{
59 font-family:verdana,arial,sans-serif;
60 font-size:11px;
61 color:#333333;
62 border-width:1px;
63 border-color:#a9c6c9;
64 border-collapse:collapse;
65 }
66 table.altrowstable th{
67 border-width:1px;
68 padding:8px;
69 border-style:solid;
70 border-color:#a9c6c9;
71 }
72 table.altrowstable td{
73 border-width:1px;
74 padding:8px;
75 border-style:solid;
76 border-color:#a9c6c9;
77 }
78 .oddrowcolor{
79 background-color:#d4e3e5;
80 }
81 .evenrowcolor{
82 background-color:#c3dde0;
83 }
84 /*/altrowstable*/
85
86 /*hovertable*/
87 table.hovertable{
88 font-family:verdana,arial,sans-serif;
89 font-size:11px;
90 color:#333333;
91 border-width:1px;
92 border-color:#999999;
93 border-collapse:collapse;
94 }
95 table.hovertable th{
96 background-color:#c3dde0;
97 border-width:1px;
98 padding:8px;
99 border-style:solid;
100 border-color:#a9c6c9;
101 }
102 table.hovertable tr{
103 background-color:#d4e3e5;
104 }
105 table.hovertable td{
106 border-width:1px;
107 padding:8px;
108 border-style:solid;
109 border-color:#a9c6c9;
110 }
111 /*/hovertable*/
112
113
114
115
116
117
table样式1:单像素边框CSS表格
118
119
120
Info Header 1
121
Info Header 2
122
Info Header 3
123
124
125
Text 1AText 1BText 1C
126
127
128
Text 2AText 2BText 2C
129
130
131
132
table样式2:带背景图的CSS样式表格
133
134
135
Info Header 1
136
Info Header 2
137
Info Header 3
138
139
140
Text 1AText 1BText 1C
141
142
143
Text 2AText 2BText 2C
144
145
146
147
table样式3:自动换整行颜色的CSS样式表格(需要用到JS)
148
149
150
Info Header 1Info Header 2Info Header 3
151
152
153
Text 1AText 1BText 1C
154
155
156
Text 2AText 2BText 2C
157
158
159
160
Text 3AText 3BText 3C
161
162
163
Text 4AText 4BText 4C
164
165
166
Text 5AText 5BText 5C
167
168
169
170
171
table样式4:鼠标悬停高亮的CSS样式表格 (需要JS)
172
173
174
Info Header 1Info Header 2Info Header 3
175
176
177
Item 1AItem 1BItem 1C
178
179
180
Item 2AItem 2BItem 2C
181
182
183
Item 3AItem 3BItem 3C
184
185
186
Item 4AItem 4BItem 4C
187
188
189
Item 5AItem 5BItem 5C
190
191
192
193
194 functionaltRows(id){195 if(document.getElementsByTagName){196
197 vartable=document.getElementById(id);198 varrows=table.getElementsByTagName(“tr”);199
200 for(i= 0; i
210 window.οnlοad=function(){211 altRows(‘alternatecolor‘);212 }213
214
215
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/191236.html原文链接：https://javaforall.net
