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;
}