tabel css去表框,table完美css样式 table表格边框样式

蕃薯耀2016年6月15日星期三

一、的css样式

边框线不会重复叠加，不会有些粗有些细，全部统一。

/**/

-{

/*-moz--;

--border-radius:5px;

border-radius:5px;*/

width:100%;

border:solid#333;

border-width:1px0px0px1px;

font-size:#333;

border-collapse:collapse;

border-spacing:0;

}

table.default-tabletbodytr{

height:20px;

line-height:20px;

}

table.default-tabletbodytr.odd{

background-color:#fff;

}

table.default-tabletbodytr.even{

background-color:#F5F5F5;

}

table.default-tabletbodytr:hover{

background-color:#eee;

}

table.default-tabletbodytrth,table.default-tabletbodytrtd{

padding:3px5px;

text-align:left;

/*border:1pxsolid#ddd;*/

border:solid#333;

border-width:0px1px1px0px;

}

table.default-tabletbodytrth{

font-weight:bold;

text-align:center;

}

table.default-tabletbodytrtd.tac{

text-align:center;

}

table.default-tabletbodytrtda:hover{

color:#0080c0;

}

/*tableend*/

二、使用方法

tableclass="default-table"

tr

th序号/th

th产品名称/th

th规格/th

th数量/th

th单位/th

/tr

tr

tdclass="tac"1/td

td这是标题这是标题这是标题这是标题这是标题这是标题/td

tdclass="tac"AAA/td

tdclass="tac"6/td

tdclass="tac"个/td

/tr

/c:forEach

/table

三、Demo展示