漂亮的表格设计

最新推荐文章于 2024-05-24 09:03:39 发布

iteye_15693

最新推荐文章于 2024-05-24 09:03:39 发布

阅读量179

点赞数

分类专栏： css 文章标签： CSS HTML

css 专栏收录该内容

2 篇文章 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>

效果图见附件：