发一个displayTag的新式样 _Web前端

发一个displayTag的新样式

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