表格边框为细线的标准做法

2009-12-14 17:09:39 by 【6yang】, 52 visits, 收藏 | 返回

border-collapse:collapse; /* 边框重叠 */

 

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!--
.datalist{
 border:1px solid #007108; /* 表格边框 */
 font-family:Arial;
 border-collapse:collapse; /* 边框重叠 */
 background-color:#d9ffdc; /* 表格背景色 */
 font-size:14px;
}
.datalist th{
 border:1px solid #007108; /* 行名称边框 */
 background-color:#00a40c; /* 行名称背景色 */
 color:#FFFFFF;    /* 行名称颜色 */
 font-weight:bold;
 padding-top:4px; padding-bottom:4px;
 padding-left:12px; padding-right:12px;
 text-align:center;
}
.datalist td{
 border:1px solid #007108; /* 单元格边框 */
 text-align:left;
 padding-top:4px; padding-bottom:4px;
 padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
 background-color:#a5e5aa; /* 隔行变色 */
}
-->
</style>
<script language="javascript" src="js/jquery-1.3.2.min.js"></script>
</head>

<script language="javascript">
$(function(){
 $("table.datalist tr:nth-child(2n+1)").addClass("altrow");
 //$("table.datalist tr:not(th):even").addClass("altrow");
});
</script>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
 <tr>
  <th scope="col">Name</th>
  <th scope="col">Class</th>
  <th scope="col">Birthday</th>
  <th scope="col">Constellation</th>
  <th scope="col">Mobile</th>
 </tr>
 <tr>
  <td>isaac</td>
  <td>W13</td>
  <td>Jun 24th</td>
  <td>Cancer</td>
  <td>1118159</td>
 </tr>
    <tr>
  <td>fresheggs</td>
  <td>W610</td>
  <td>Nov 5th</td>
  <td>Scorpio</td>
  <td>1038818</td>
 </tr>
 <tr>
  <td>girlwing</td>
  <td>W210</td>
  <td>Sep 16th</td>
  <td>Virgo</td>
  <td>1307994</td>
 </tr>
 <tr>
  <td>tastestory</td>
  <td>W15</td>
  <td>Nov 29th</td>
  <td>Sagittarius</td>
  <td>1095245</td>
 </tr>
 <tr>
  <td>lovehate</td>
  <td>W47</td>
  <td>Sep 5th</td>
  <td>Virgo</td>
  <td>6098017</td>
 </tr>
 <tr>
  <td>slepox</td>
  <td>W19</td>
  <td>Nov 18th</td>
  <td>Scorpio</td>
  <td>0658635</td>
 </tr>
 <tr>
  <td>smartlau</td>
  <td>W19</td>
  <td>Dec 30th</td>
  <td>Capricorn</td>
  <td>0006621</td>
 </tr>
 <tr>
  <td>shenhuanyan</td>
  <td>W25</td>
  <td>Jan 31th</td>
  <td>Aquarius</td>
  <td>0621827</td>
 </tr>
 <tr>
  <td>tuonene</td>
  <td>W210</td>
  <td>Nov 26th</td>
  <td>Sagittarius</td>
  <td>0091704</td>
 </tr>
 <tr>
  <td>ArthurRivers</td>
  <td>W91</td>
  <td>Feb 26th</td>
  <td>Pisces</td>
  <td>0468357</td>
 </tr>
 <tr>
  <td>reconzansp</td>
  <td>W09</td>
  <td>Oct 13th</td>
  <td>Libra</td>
  <td>3643041</td>
 </tr>
 <tr>
  <td>linear</td>
  <td>W86</td>
  <td>Aug 18th</td>
  <td>Leo</td>
  <td>6398341</td>
 </tr>
 <tr>
  <td>laopiao</td>
  <td>W41</td>
  <td>May 17th</td>
  <td>Taurus</td>
  <td>1254004</td>
 </tr>
 <tr>
  <td>dovecho</td>
  <td>W19</td>
  <td>Dec 9th</td>
  <td>Sagittarius</td>
  <td>1892013</td>
 </tr>
 <tr>
  <td>shanghen</td>
  <td>W42</td>
  <td>May 24th</td>
  <td>Gemini</td>
  <td>1544254</td>
 </tr>
 <tr>
  <td>venessawj</td>
  <td>W45</td>
  <td>Apr 1st</td>
  <td>Aries</td>
  <td>1523753</td>
 </tr>
 <tr>
  <td>lightyear</td>
  <td>W311</td>
  <td>Mar 23th</td>
  <td>Aries</td>
  <td>1002908</td>
 </tr>
</table>
</body>
</html>

分享到:
share

    图片原图

    loading

    loading