当前位置: 代码迷 >> HTML/CSS >> css 润饰table
  详细解决方案

css 润饰table

热度:160   发布时间:2012-09-03 09:48:39.0
css 修饰table
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" /> 
<title>Css 表格(table)</title> 
</head> 
<style type="text/css"> 
/* CSS Document */ 

body { 
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
background: #E6EAE9; 
} 

a { 
color: #c75f3e; 
} 

#mytable { 
width: 700px; 
padding: 0; 
margin: 0; 
} 

caption { 
padding: 0 0 5px 0; 
width: 700px; 
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
text-align: right; 
} 

th { 
font: bold 11px "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; 
} 
/*power by www.winshell.cn*/ 
th.nobg { 
border-top: 0; 
border-left: 0; 
border-right: 1px solid #C1DAD7; 
background: none; 
} 

td { 

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


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

th.spec { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #fff no-repeat; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
} 

th.specalt { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #f5fafa no-repeat; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #797268; 
} 
/*---------for IE 5.x bug*/ 
html>body td{ font-size:11px;} 
body,td,th { 
font-family: 宋体, Arial; 
font-size: 12px; 
} 
</style> 

<body> 
<center>
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple 

PowerMac G5 series"> 
<caption> </caption> 
<tr> 
<th scope="col">姓名</th> 
<th scope="col">年龄</th> 
<th scope="col">电话</th> 
<th scope="col">居住地点</th> 
</tr> 
<tr> 
<td class="row">kalision</td> 
<td class="row">100</td> 
<td class="row">012-345</td> 
<td class="row">TsingTao</td> 
</tr> 
<tr> 
<td class="row">kalision</td> 
<td class="row">100</td> 
<td class="row">012-345</td> 
<td class="row">TsingTao</td> 
</tr> 
<tr> 
<td class="row">kalision</td> 
<td class="row">100</td> 
<td class="row">012-345</td> 
<td class="row">TsingTao</td> 
</tr> 
<tr> 
<td class="row">kalision</td> 
<td class="row">100</td> 
<td class="row">012-345</td> 
<td class="row">TsingTao</td> 
</tr> 
<tr> 
<td class="row">kalision</td> 
<td class="row">100</td> 
<td class="row">012-345</td> 
<td class="row">TsingTao</td> 
</tr> 
<tr> 
<td class="row">kalision</td> 
<td class="row">100</td> 
<td class="row">012-345</td> 
<td class="row">TsingTao</td> 
</tr> 

</tr> 
</table> 
</center>
</body> 
</html> 

  相关解决方案