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/