注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天边云E家 shaoruisky

IT博文共享,知识的海洋

 
 
 

日志

 
 

经常使用的两个清爽的table样式  

2015-02-05 13:46:57|  分类: C# |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
table在使用中占有很重要的地位,下面附上两个我经常使用的table样式,喜欢的朋友可以参考下
附上两个我经常使用的table样式: 
 

<html> 
<head> 
<title></title> 
<style type="text/css"> 
body,table{ 
font-size:12px; 

table{ 
table-layout:fixed; 
empty-cells:show; 
border-collapse: collapse; 
margin:0 auto; 

td{ 
height:30px; 

h1,h2,h3{ 
font-size:12px; 
margin:0; 
padding:0; 

.table{ 
border:1px solid #cad9ea; 
color:#666; 

.table th { 
background-repeat:repeat-x; 
height:30px; 

.table td,.table th{ 
border:1px solid #cad9ea; 
padding:0 1em 0; 

.table tr.alter{ 
background-color:#f5fafe; 

</style> 
</head> 
<body> 
<table width="90%" class="table"> 
<tr> 
<th>学号</th> 
<th>姓名</th> 
<th>平时</th> 
<th>期中</th> 
<th>实验(践)</th> 
<th>其它</th> 
<th>期末</th> 
<th>总评</th> 
</tr> 
<tr> 
<td>1</td> 
<td>1</td> 
<td>1</td> 
<td>1</td> 
<td>1</td> 
<td>1</td> 
<td>1</td> 
<td>1</td> 
</tr> 
<tr class="alter"> 
<td>2</td> 
<td>2</td> 
<td>2</td> 
<td>2</td> 
<td>2</td> 
<td>2</td> 
<td>2</td> 
<td>2</td> 
</tr> 
</table> 
</body> 
</html> 

<html> 
<head> 
<title></title> 
<style type="text/css"> 
.table 

width: 100%; 
padding: 0; 
margin: 0; 

th { 
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
border-top: 1px solid #C1DAD7; 
letter-spacing: 2px; 
text-transform: uppercase; 
text-align: left; 
padding: 6px 6px 6px 12px; 
background: #CAE8EA no-repeat; 

td { 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
background: #fff; 
font-size:14px; 
padding: 6px 6px 6px 12px; 
color: #4f6b72; 

td.alt { 
background: #F5FAFA; 
color: #797268; 

th.spec,td.spec { 
border-left: 1px solid #C1DAD7; 

/*---------for IE 5.x bug*/ 
html>body td{ font-size:14px;} 
tr.select th,tr.select td 

background-color:#CAE8EA; 
color: #797268; 

</style> 
</head> 
<body> 
<table class="table" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> 
<tr> 
<th class="spec">选择</th> 
<th>课程名称</th> 
<th>课程编号</th> 
<th>已经考试次数</th> 
</tr> 
<tr> 
<td class="spec">1</td> 
<td>1</td> 
<td class="alt">1</td> 
<td>1</td> 
</tr> 
<tr class="select"> 
<td class="spec">2</td> 
<td>2</td> 
<td class="alt">2</td> 
<td>2</td> 
</tr> 
<tr> 
<td class="spec">3</td> 
<td>3</td> 
<td class="alt">3</td> 
<td>3</td> 
</tr> 
</table> 
</body> 
</html> 


  评论这张
 
阅读(113)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016