displayTag是非常常用的一个表格标签,但是它的样式却有点呆板,最近客户就对它的样式极为不满,让我们改进,没办法,客户就是上帝,只能照办。原样式如下:
修改后如下:
其实主要就是修改了其自带的display.css这个样式表,代码如下:
原display.css
table.t1 { star:expression(this.width="100%",this.border="1",this.style.wordBreak="break-all",this.cellPadding="0",this.cellSpacing="0",this.borderColorLight="#D4D4D4",this.borderColorDark="#eeeeee",this.bgcolor="#333333"); } th { background-color:#C9DCF5; font-size:12px; font-family:����,Arial,Helvetica,sans-serif; color:#0049AC; text-decoration:none; line-height:30px; text-align:center; font-weight:400px; } tr.odd { background-color:#FFF; line-height:30px; } tr.even { background-color:#F1F1F1; line-height:30px; } th.sortable a { background-image:url(../image/displaytag/arrow_up.png); background-repeat:no-repeat; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#0049AC; text-decoration:none; line-height:30px; } th.order1 a { background-image:url(../image/displaytag/arrow_off.png); background-repeat:no-repeat; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#0049AC; text-decoration:none; line-height:30px; } th.order2 a { background-image:url(../image/displaytag/arrow_down.png); background-repeat:no-repeat; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#0049AC; text-decoration:none; line-height:30px; } th a,th a:visited { color:#0049AC; text-decoration:none; } th a:hover { text-decoration:none; color:#0049AC; } th.sorted a,th.sortable a { background-position:right; display:#0049AC; width:100%; text-decoration:none; } td { font-size:12px; color:#0049AC; } a:hover { color:#0049AC; font-size:12px; text-decoration:none; } span.pagebanner { align:left; color:#0049AC; } span.pagelinks { align:right; color:#0049AC; } th.notsortable a { background-repeat:no-repeat; } .t1 { background-color:#FFF; } .t2 { background-color:#FAFAFA; } .t3 { background-color:#f4f7fb; }
修改后的display.css
body{ font-size:12px; font-family:"宋体"; color:#5c5c5c; } .table-border-blue{ border-width: 0px; } th { font-size:12px; font-family:"宋体"; color:#5c5c5c; text-align:center; font-weight:normal; } th.sortable a, th a:visited { color:#5c5c5c; } th.sortable a { background-image:url(../image/displaytag/arrow_up.png); background-repeat:no-repeat; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#0049AC; text-decoration:none; line-height:30px; } th.order1 a { background-image:url(../image/displaytag/arrow_off.png); background-repeat:no-repeat; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#0049AC; text-decoration:none; line-height:30px; } th.order2 a { background-image:url(../image/displaytag/arrow_down.png); background-repeat:no-repeat; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#0049AC; text-decoration:none; line-height:30px; } th.sorted a,th.sortable a { background-position:right; display:#0049AC; width:100%; text-decoration:none; } table.t1{ star:expression(this.tableLayout="fixed"); border-collapse:collapse; width:100%; text-align:center; height:35px; float:left; margin: 0px 1px 5px 0px; border-top-style: none; border-left-style: none; border-right-style: none; border-bottom-style: none; background-color:#f1f1f1; } tr.odd { background-color:#ffffff; } tr.even { background-color:#f8f8f8; } .t1 thead{ background:url(../images/titlebg_01.gif) repeat-x; border:#c4d5df solid 1px; height:35px; } .t1 td, .t1 thead a{ color:#5c5c5c; font-style:normal; } .td-icon{ background:url(../images/list01.gif) no-repeat 8px 7px; } .sortable{ border:#c4d5df solid 0px; color:#5c5c5c; font-style:normal; } .t1 tbody td{ height:28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border:0px; border-top: #f1f1f1 solid 1px; border-bottom: #f1f1f1 solid 1px; } .t1 tfoot td{ height:35px; background:url(../images/titlebg_01.gif) repeat-x; } .guideBar{ width:100%; border:#c4d5df solid 1px; height:14px; float:left; padding: 10px 2px 10px 0; margin: 0 0 5px 0; } .guideLable{ color:#004b9e; } .guide{ position:relative; margin:0 16px 0 0; text-align: right; } .currentLable, .currentGuide{ color:#4388ce; font-style:normal; font-weight:bold; } .currentGuide{ background:url(../images/pic01.gif) no-repeat 0 1px; float:left; margin:0 0 0 8px; padding:0 0 0 16px; text-align: left; } .currentGuide2{ background:url(../images/pic02.gif) no-repeat 0 1px; float:left; margin:0 0 0 8px; padding:0 0 0 16px; text-align: left; color:#4388ce; font-style:normal; font-weight:bold; } .search-none{ display: none; } .search-block{ display: block; margin:10px 10px 0 10px; border-top: #c4d5df solid 1px; padding: 5px 0 0 5px; } .searchTable{ text-align: left; height:30px; } .block{ margin-top: 5px; border:#c8c8c8 dashed 1px; width:100%; height:14px; float:left; padding: 8px 2px 4px 0; } .blockTitle{ list-style-type:none ; color:#8d8d8d; font-style:normal; font-weight:bold; height: 22px; } .blockContent{ list-style-type:none; color:#8d8d8d; font-style:normal; height: 20px; }