table完美css样式，table的基本样式，table样式

table完美css样式，table的基本样式，table样式

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2016年6月15日 09:04:26 星期三

http://fanshuyao.iteye.com/

 

一、table的css样式

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

 

/*table start*/
table.default-table{
	/* -moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border-radius:5px; */
	width: 100%;
	border:solid #333; 
	border-width:1px 0px 0px 1px;
	font-size: #333;
	border-collapse: collapse;
	border-spacing: 0;
}
table.default-table tbody tr{
	height: 20px;
	line-height: 20px;
}
table.default-table tbody tr.odd{
	background-color: #fff;
}
table.default-table tbody tr.even{
	background-color: #F5F5F5;
}
table.default-table tbody tr:hover{
	background-color: #eee;
}
table.default-table tbody tr th,table.default-table tbody tr td{
	padding:3px 5px;
	text-align: left;
	/* border: 1px solid #ddd; */
	border:solid #333; 
	border-width:0px 1px 1px 0px; 
}
table.default-table tbody tr th{
	font-weight: bold;
	text-align: center;
}

table.default-table tbody tr td.tac{
	text-align: center;
}
table.default-table tbody tr td a:hover{
	color:#0080c0;
}
/*table end*/

 

 

二、使用方法

 

 

<table class="default-table">
    	<tr>
    		<th>序号</th>
    		<th>产品名称</th>
    		<th>规格</th>
    		<th>数量</th>
    		<th>单位</th>
    	</tr>
    	<tr>
                <td class="tac">1</td>
                <td>这是标题这是标题这是标题这是标题这是标题这是标题</td>
	    	<td class="tac">AAA</td>
                <td class="tac">6</td>
                <td class="tac">个</td>
    	</tr>
    	</c:forEach>
    </table>

 

 

三、Demo展示

 

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2016年6月15日 09:04:26 星期三

http://fanshuyao.iteye.com/

评论

3 楼 蕃薯耀 2016-06-16  

houyujiangjun 写道

你把这叫做完美. 我也是醉了...

那怎样的table才是完美？

2 楼 田梦桦 2016-06-15  

前端已经很少用table了呀

1 楼 houyujiangjun 2016-06-15  

你把这叫做完美. 我也是醉了...