漂亮的表格设计

原文地址：http://zhy584520.iteye.com/blog/853646

css代码:

Html代码  收藏代码
  1. .mylist  
  2. {  
  3.     width: auto;  
  4.     height:auto;  
  5.     border:1px solid #accdf4;  
  6.     margin-top:10px;  
  7.     font-family:"宋体";  
  8.     font-size:12px;  
  9.     color:#155c9f;  
  10.     text-align:center;  
  11.     border-collapse: collapse;  
  12. }  
  13. .mylist th  
  14. {  
  15.     background-color:#d0e4ff;  
  16.     text-align:center;  
  17.     border-right:1px solid #accdf4;   
  18.     border-bottom:1px solid #accdf4;  
  19.     text-align:center;  
  20.     height:25px;  
  21.     line-height:25px;  
  22.     width:100px;  
  23. }  
  24. .mylist td  
  25. {  
  26.     border-right:1px solid #accdf4;   
  27.     text-align:center;  
  28.     height:25px;  
  29.     line-height:25px;  
  30.     width:100px;  
  31. }  

 html代码如下：

Html代码  收藏代码
  1. <table class="mylist">  
  2.    <tr>  
  3.       <th>选择</th>  
  4.       <th>报送单位</th>  
  5.       <th>报送月份</th>  
  6.       <th>事故类型</th>  
  7.       <th>报送时间</th>  
  8.    </tr>  
  9.    <tr>  
  10.      <td ><input type="checkbox" /></td>  
  11.      <td>&nbsp;广州市</td>  
  12.      <td>&nbsp;2010年10月</td>  
  13.      <td>&nbsp;公路事故月报</td>  
  14.      <td>&nbsp;2010年11月8日 17:30</td>  
  15.    </tr>  
  16.    <tr style="background-color:#eeeeee;">  
  17.      <td ><input type="checkbox" /></td>  
  18.      <td>&nbsp;广州市</td>  
  19.      <td>&nbsp;2010年10月</td>  
  20.      <td>&nbsp;公路事故月报</td>  
  21.      <td>&nbsp;2010年11月8日 17:30</td>  
  22.    </tr>  
  23.    <tr>  
  24.      <td ><input type="checkbox" /></td>  
  25.      <td>&nbsp;广州市</td>  
  26.      <td>&nbsp;2010年10月</td>  
  27.      <td>&nbsp;公路事故月报</td>  
  28.      <td>&nbsp;2010年11月8日 17:30</td>  
  29.    </tr>  
  30.    <tr style="background-color:#eeeeee;">  
  31.      <td ><input type="checkbox" /></td>  
  32.      <td>&nbsp;广州市</td>  
  33.      <td>&nbsp;2010年10月</td>  
  34.      <td>&nbsp;公路事故月报</td>  
  35.      <td>&nbsp;2010年11月8日 17:30</td>  
  36.    </tr>  
  37. </table>  

 效果图见附件：

posted @ 2013-05-10 09:54  歌颂者  阅读(361)  评论(0)  编辑  收藏  举报