table td 实现细边框的样式 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
 .cont tr:hover{border:#000 1px solid;}
 .topTd{border-top:1px solid #ccc; }
 .rightTd{border-right:1px solid #ccc;}
 .bottomTd{border-bottom:1px solid #ccc;}
 .leftTd{border-left:1px solid #ccc; text-align:center; line-height:35px;}
  </style>
 </head>

 <body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="cont">
 <tr>
  <td width="10%" class="leftTd topTd bottomTd">a</td>
  <td width="35%" class="leftTd topTd bottomTd">b</td>
  <td width="35%" class="leftTd topTd bottomTd">c</td>
  <td width="18%" class="leftTd rightTd topTd bottomTd">d</td>
 </tr>

 <tr>
  <td class="leftTd bottomTd">3</td>
  <td class="leftTd bottomTd">&nbsp;</td>
  <td class="leftTd bottomTd">&nbsp;</td>
  <td class="leftTd rightTd bottomTd">&nbsp;</td>
 </tr>


 <tr>
  <td class="leftTd bottomTd">3</td>
  <td class="leftTd bottomTd">&nbsp;</td>
  <td class="leftTd bottomTd">&nbsp;</td>
  <td class="leftTd rightTd bottomTd">&nbsp;</td>
 </tr>



  </table>
 </body>
</html>

 

posted @ 2013-09-23 22:44  网络爱上点击  阅读(2298)  评论(0)    收藏  举报