1 2 3 4 5 table 控制单双行颜色以及鼠标hover颜色 6 7 8 a 9 { 10 font-size: 16px; 11 line-height: 20px; 12 } 13 a:link 14 { 15 color: Black; /*未访问：黑色、无下划线 -*/ 16 text-decoration: none; 17 } 18 a:active: 19 { 20 color: Orange; /*激活：红色 -*/ 21 } 22 a:visited 23 { 24 color: Black; 25 text-decoration: none; /*已访问：Black、无下划线 -*/ 26 } 27 a:hover 28 { 29 color: Orange; 30 text-decoration: underline; /*鼠标移近：红色、下划线 -*/ 31 } 32 p 33 { 34 width: 700px; 35 margin: 10px 0 0 0; 36 padding: 10px; 37 border: 0; 38 border: 1px dotted Orange; 39 background: #f5f5f5; 40 min-height: 25px; 41 } 42 table.tableList 43 { 44 border-collapse: collapse; 45 border: solid 1px Orange; 46 width: 100%; 47 text-align: center; 48 } 49 table.tableList th 50 { 51 padding: 1px 6px; 52 line-height: 21px; 53 font-weight: bolder; 54 } 55 table.tableList td 56 { 57 padding: 1px 6px; 58 line-height: 21px; 59 } 60 table.tableList .hot 61 { 62 background-color: #FFFACD; 63 } 64 table.tableList .toleft 65 { 66 text-align: left; 67 } 68 table.tableList .toright 69 { 70 text-align: right; 71 } 72 table.tableList .tomiddle 73 { 74 text-align: center; 75 } 76 77 78 window.onload = function () { 79 changeTableStyle(); 80 } 81 function changeTableStyle() { //修改数据列表样式 82 var oldcolor; 83 $(".tableList td").css({ 'border-left': '#C9CACA 1px solid', color: '#000' }); 84 $(".tableList tr:even").css('background-color', '#E2E7EA'); 85 $(".tableList tr").hover( 86 function () { 87 if ($(this).attr("class") != "trhead") { 88 oldcolor = $(this).css('background-color'); $(this).css('background-color', '#BADDE9') 89 } 90 }, 91 function () { 92 if ($(this).attr("class") != "trhead") { 93 $(this).css('background-color', oldcolor) 94 } 95 } 96 ); 97 $(".trhead").css({ background: "Orange" }); 98 } 99 100 101 102 103 table 控制单双行颜色以及鼠标hover颜色
104 hot :tr背景变色105
106 tomiddle:td内文字居中107
108 toright:td内文字居右
109 toLeft :td内文字居左
110
111
112 113 114 115 来源116 117 118 标题119 120 121 标题122 123 124 标题125 126 127 标题128 129 130 标题131 132 133 134 135 Orange.136 137 138 测试文字139 140 141 测试文字142 143 144 测试文字145 146 147 测试文字148 149 150 测试文字151 152 153 154 155 Orange.156 157 158 测试文字159 160 161 测试文字162 163 164 测试文字165 166 167 测试文字168 169 170 测试文字171 172 173 174 175 Orange.176 177 178 测试文字179 180 181 测试文字182 183 184 测试文字185 186 187 测试文字188 189 190 测试文字191 192 193 194 195 Orange.196 197 198 测试文字199 200 201 测试文字202 203 204 测试文字205 206 207 测试文字208 209 210 测试文字211 212 213 214 215 Orange.216 217 218 测试文字219 220 221 测试文字222 223 224 测试文字225 226 227 测试文字228 229 230 测试文字231 232 233 234 235 Orange.236 237 238 测试文字239 240 241 测试文字242 243 244 测试文字245 246 247 测试文字248 249 250 测试文字251 252 253 254 255 Orange.256 257 258 测试文字259 260 261 测试文字262 263 264 测试文字265 266 267 测试文字268 269 270 测试文字271 272 273 274 275 Orange.276 277 278 测试文字279 280 281 测试文字282 283 284 测试文字285 286 287 测试文字288 289 290 测试文字291 292 293 294 295 Orange.296 297 298 测试文字299 300 301 测试文字302 303 304 测试文字305 306 307 测试文字308 309 310 测试文字311 312 313 314 315 效果图：
附件下载：http://files.cnblogs.com/Orange-C/TableDemo.zip 出处 http://www.cnblogs.com/Orange-C/p/4049832.html
查看更多关于table控制单双行颜色以及鼠标hover颜色table光棒_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did105999