html表格美化模板,JavaScript + CSS 美化出的条纹表格样式

表格样式

body{

margin: 6px;

padding: 0;

font-size: 12px;

font-family: tahoma, arial;

background: #fff;

}

table{

width: 100%;

}

tr.odd{

background: #fff;

}

tr.even{

background: #eee;

}

div.datagrid_div{

width: 100%;

border: 1px solid #999;

}

/*****************样式1*******************/

table.datagrid1{

border-collapse: collapse;

border-bottom: 1px solid #666;

}

table.datagrid1 th{

color: #333;

padding: 3px;

font-family: monospace;

background: #9cf;

text-align: left;

border-top: 1px solid #666;

border-bottom: 1px solid #666;

}

table.datagrid1 td{

padding: 3px;

border-top: 1px solid #ccc;

}

/*****************样式2*******************/

table.datagrid2{

border-collapse: collapse;

}

table.datagrid2 th{

text-align: left;

background: #9cf;

padding: 3px;

border: 1px #333 solid;

}

table.datagrid2 td{

padding: 3px;

border: none;

border:1px #333 solid;

}

/*****************样式3*******************/

table.datagrid3{

border-collapse: separate;

}

table.datagrid3 th{

text-align: left;

background: #ddd;

padding: 3px;

border: 0px solid #fff;

}

table.datagrid3 td{

padding: 3px;

border: 0px solid #fff;

}

/*****************样式4*******************/

table.datagrid4{

border-collapse: collapse;

}

table.datagrid4 th{

text-align: left;

background: #ddd;

padding: 3px;

border: none;

}

table.datagrid4 td{

padding: 3px;

border: none;

border-top: 1px solid #fff;

}

/*****************************************/

tr:hover,

tr.hover{

background: #9cf;

}

function add_event(tr){

tr.onmouseover = function(){

tr.className += ' hover';

};

tr.onmouseout = function(){

tr.className = tr.className.replace(' hover', '');

};

}

function stripe(table) {

var trs = table.getElementsByTagName("tr");

for(var i=1; i

var tr = trs[i];

tr.className = i%2 != 0? 'odd' : 'even';

add_event(tr);

}

}

window.onload = function(){

var tables = document.getElementsByTagName('table');

for(var i=0; i

var table = tables[i];

if(table.className == 'datagrid1' || table.className == 'datagrid2'

|| table.className == 'datagrid3' || table.className == 'datagrid4'){

stripe(tables[i]);

}

}

}

样式1

合约	最新价	涨跌
纽期所原油	54.39	-0.56
纽约期金	738.5	5.8
CBOT大豆	905.25	3.25

样式2

合约	最新价	涨跌
CBOT大豆	905.25	3.25
ideawu.net	381.25	1.25
CBOT小麦	548.5	-1

样式3

合约	最新价	涨跌
CBOT大豆	905.25	3.25
ideawu.net	381.25	1.25
CBOT小麦	548.5	-1

样式4

合约	最新价	涨跌
CBOT大豆	905.25	3.25
ideawu.net	381.25	1.25
CBOT小麦	548.5	-1