时间:2016-01-22 07:26 来源: 我爱IT技术网 作者:佚名
本文所分享的知识点是【经常使用的两个清爽的table样式】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
经常使用的两个清爽的table样式
<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;
}
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>
关于经常使用的两个清爽的table样式的相关讨论如下：
相关问题：一个div中有两个table（宽度95%）如何保持两个tabl...
答： 无标题文档 *{ border:0px; margin:0px; padding:0px; } .con{ border:1px solid #ccc; height:200px; margin:50px auto; width:800px; } table{ background:#fcc; float:left; margin-left:6%; width:41%; } 第一个表格 第二个表格第二个表格... >>详细
相关问题：jsp页面两个table一般都是上下排列的，想左右排，...
答：你画一个大table只包含一个tr tr里两个td，两个td分别画两个table不就行了。。。。 >>详细
相关问题：CSS如何给同一页面的两个表格设定不同样式
答：1、两个表格定义不同的class，通过class设定不同的样式 如 .a{border:2px;} .b{border:10px;} 2、两个表格定义不同的id，通过id设定不同的样式 如 #a{border:2px;} #b{border:10px;} >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-