当前位置: 代码迷 >> Web前端 >> 漂亮的报表设计
  详细解决方案

漂亮的报表设计

热度:120   发布时间:2012-11-13 10:00:50.0
漂亮的表格设计

哈哈,最近发现一个表格设计挺漂亮的,存下档,以便日后之需。

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>&nbsp;广州市</td>
     <td>&nbsp;2010年10月</td>
     <td>&nbsp;公路事故月报</td>
     <td>&nbsp;2010年11月8日 17:30</td>
   </tr>
   <tr style="background-color:#eeeeee;">
     <td ><input type="checkbox" /></td>
     <td>&nbsp;广州市</td>
     <td>&nbsp;2010年10月</td>
     <td>&nbsp;公路事故月报</td>
     <td>&nbsp;2010年11月8日 17:30</td>
   </tr>
   <tr>
     <td ><input type="checkbox" /></td>
     <td>&nbsp;广州市</td>
     <td>&nbsp;2010年10月</td>
     <td>&nbsp;公路事故月报</td>
     <td>&nbsp;2010年11月8日 17:30</td>
   </tr>
   <tr style="background-color:#eeeeee;">
     <td ><input type="checkbox" /></td>
     <td>&nbsp;广州市</td>
     <td>&nbsp;2010年10月</td>
     <td>&nbsp;公路事故月报</td>
     <td>&nbsp;2010年11月8日 17:30</td>
   </tr>
</table>

?效果图见附件:

?

  相关解决方案