经常使用的两个清爽的table样式_ Div+Css教程-查字典教程网
经常使用的两个清爽的table样式
经常使用的两个清爽的table样式
发布时间:2017-01-07 来源:查字典编辑
摘要:附上两个我经常使用的table样式:body,table{font-size:12px;}table{table-layout:fixed;...

附上两个我经常使用的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%">

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

<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 cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">

<tr>

<th>选择</th>

<th>课程名称</th>

<th>课程编号</th>

<th>已经考试次数</th>

</tr>

<tr>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td>2</td>

<td>2</td>

<td>2</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>3</td>

<td>3</td>

<td>3</td>

</tr>

</table>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类