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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值