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

最新推荐文章于 2023-05-26 14:11:03 发布

从删库到跑路养成记

最新推荐文章于 2023-05-26 14:11:03 发布

阅读量1.9k

点赞数

文章标签： html

<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>

从删库到跑路养成记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
经常使用的两个清爽的table样式

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;
复制链接

扫一扫