纯CSS美化表格单元格背景效果,效果很帅

来源：互联网发布：故宫淘宝与故宫旗舰店编辑：程序博客网时间：2024/06/05 21:49

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS美化表格</title>

</head>

<style type="text/css">

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 sans-serif;

text-align: right;

}

th {

font: bold 11px 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;

}

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;

font: bold 10px sans-serif;

}

th.specalt {

border-left: 1px solid #C1DAD7;

border-top: 0;

font: bold 10px sans-serif;

color: #797268;

}

/*---------for IE 5.x bug*/

html>body td{ font-size:11px;}

</style>

<body>

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">

<caption> </caption>

<tr>

<th scope="col" abbr="Configurations" class="nobg">Configurations</th>

<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>

<th scope="col" abbr="Dual 2">Dual 2GHz</th>

<th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>

</tr>

<tr>

<th scope="row" abbr="Model" class="spec">lipeng</th>

<td>M9454LL/A</td>

<td>M9455LL/A</td>

<td>M9457LL/A</td>

</tr>

<tr>

<th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>

<td class="alt">Dual 1.8GHz PowerPC G5</td>

<td class="alt">Dual 2GHz PowerPC G5</td>

<td class="alt">Dual 2.5GHz PowerPC G5</td>

</tr>

<tr>

<th scope="row" abbr="Frontside bus" class="spec">地图名片</th>

<td>900MHz per processor</td>

<td>1GHz per processor</td>

<td>1.25GHz per processor</td>

</tr>

<tr>

<th scope="row" abbr="L2 Cache" class="specalt">图秀卡</th>

<td class="alt">512K per processor</td>

</tr>

</table>

</body>

</html>

阅读全文

0 0