CSS漂亮表格

网上找到的,自己修改了一下,符合自己的使用习惯,故存放于此

上面表格的代码:

<style type="text/css">
caption { 
    padding: 0 0 5px 0;      
    font: italic 30px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    text-align: center; 
} 
	
/* 

	TableCloth	
	by Alen Grakalic, brought to you by cssglobe.com
	
*/ /* general styles */
table,td {
	font: 100% Arial, Helvetica, sans-serif;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
}

th,td {
	text-align: left;
	padding: .5em;
	border: 1px solid #fff;
}

th {
	background: #328aa4 url(tr_back.gif) repeat-x;
	color: #fff;
}

td {
	background: #e5f1f4;
}

/* tablecloth styles */
tr.even td {
	background: #e5f1f4;
}

tr.odd td {
	background: #f8fbfc;
}

th.over,tr.even th.over,tr.odd th.over {
	background: #4a98af;
}

th.down,tr.even th.down,tr.odd th.down {
	background: #bce774;
}

th.selected,tr.even th.selected,tr.odd th.selected {
	
}

td.over,tr.even td.over,tr.odd td.over {
	background: #ecfbd4;
}

td.down,tr.even td.down,tr.odd td.down {
	background: #bce774;
	color: #fff;
}

td.selected,tr.even td.selected,tr.odd td.selected {
	background: #bce774;
	color: #555;
}

/* use this if you want to apply different styleing to empty table cells*/
td.empty,tr.odd td.empty,tr.even td.empty {
	background: #fff;
}
</style>

<table>
	<caption>caption</caption>
<tr>
	<th>...</th>
	<th>...</th>
	<th>...</th>
	<th>...</th>
	<th>...</th>
	<th>...</th>
</tr>


<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>


<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>

<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>

<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>
</table>

 

评论

5 楼 ksqqxq 2010-09-24  

很漂亮。谢谢了哦

4 楼 ksqqxq 2010-09-24  

下载看看哦啊！

3 楼 tunpishuang 2010-05-02  

很好。有js控制奇偶行颜色。

2 楼 zjf 2009-07-15  

henhao

1 楼 darkbaby123 2009-07-13  

下别人资源，不能不顶。
实际效果比lz放的图好看很多啊，为什么搞这么平凡的截图？