漂亮的表格设计
原文地址:http://zhy584520.iteye.com/blog/853646
css代码:
- .mylist
- {
- width: auto;
- height:auto;
- border:1px solid #accdf4;
- margin-top:10px;
- font-family:"宋体";
- font-size:12px;
- color:#155c9f;
- text-align:center;
- border-collapse: collapse;
- }
- .mylist th
- {
- background-color:#d0e4ff;
- text-align:center;
- border-right:1px solid #accdf4;
- border-bottom:1px solid #accdf4;
- text-align:center;
- height:25px;
- line-height:25px;
- width:100px;
- }
- .mylist td
- {
- border-right:1px solid #accdf4;
- text-align:center;
- height:25px;
- line-height:25px;
- width:100px;
- }
html代码如下:
- <table class="mylist">
- <tr>
- <th>选择</th>
- <th>报送单位</th>
- <th>报送月份</th>
- <th>事故类型</th>
- <th>报送时间</th>
- </tr>
- <tr>
- <td ><input type="checkbox" /></td>
- <td> 广州市</td>
- <td> 2010年10月</td>
- <td> 公路事故月报</td>
- <td> 2010年11月8日 17:30</td>
- </tr>
- <tr style="background-color:#eeeeee;">
- <td ><input type="checkbox" /></td>
- <td> 广州市</td>
- <td> 2010年10月</td>
- <td> 公路事故月报</td>
- <td> 2010年11月8日 17:30</td>
- </tr>
- <tr>
- <td ><input type="checkbox" /></td>
- <td> 广州市</td>
- <td> 2010年10月</td>
- <td> 公路事故月报</td>
- <td> 2010年11月8日 17:30</td>
- </tr>
- <tr style="background-color:#eeeeee;">
- <td ><input type="checkbox" /></td>
- <td> 广州市</td>
- <td> 2010年10月</td>
- <td> 公路事故月报</td>
- <td> 2010年11月8日 17:30</td>
- </tr>
- </table>
效果图见附件: