简单的表格 样式学习

 

table{
	border:1px solid rgb(139,181,130);
	font-size:14px;
    table-layout:fixed;
    empty-cells:show; 
    border-collapse: collapse;
    margin:3px ;
}

*{
	word-wrap:break-word;
}

table.t1{
    border:1px solid #cad9ea;
    color:#666;
}
/*内容单行显示  多余用省略号  不显示过长 */
table.t1 td,table.t1 th{
    border:1px solid #cad9ea;
    padding:0;
   text-align:center;
    
    white-space:nowrap;
    text-overflow:ellipsis;
    word-break:normal;
    overflow:hidden;
}


	<table border="1" width="100%"  class="t1">
		<tr>
			<th width="3%">id</th>
			<th width="10%">公司</th>
			<th width="5%">联系人</th>
			<th width="7%">联系电话</th>
			<th width="8%">时间</th>
			<th width="8%">联系</th>
			<th width="8%">Email</th>
			<th width="8%">区域</th>
			<th width="13%">简介</th>
			<th width="13%">代理计划</th>
			
		</tr>
	 
	 	<tr valign="top">
		 	<td title="">${agent.id }</td>
		 	<td title="">${agent.companyName }</td>
		 	<td title="">${agent.connectPerson}</td>
		 	<td title="">${agent.phone }</td>
		 	<td title="<fmt:formatDate value="${agent.joinDate}" pattern="yyyy-MM-dd HH:mm:ss"/>" >
		 		<fmt:formatDate value="${agent.joinDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
		 	</td>
		 	
		 	<td title="">${agent.address }</td>
		 	<td title="" onclick=""></td>
		 	<td title="" onclick=""></td>
		 	<td title="" onclick=""></td>
		 	<td title="" onclick=""></td>

		 	
	 	</tr>
	 	 
  
	 </table>


	<div id="floatBoxBg" style="background-color:black;position:absolute;top:0px;left:0px;display:none;filter:alpha(opacity=20);opacity:0.2;;width:100%;z-index:99"></div>