zoukankan      html  css  js  c++  java
  • 纯CSS美化表格单元格背景效果,效果很帅

    <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 {
    	 700px;
    	padding: 0;
    	margin: 0;
    }
    caption {
    	padding: 0 0 5px 0;
    	 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>
        <td class="alt">512K per processor</td>
        <td class="alt">512K per processor</td>
      </tr>
    </table>
    </body>
    </html>
    文章来自学IT网:http://www.xueit.com/html/2010-01-22/81-85564288662.html
    
  • 相关阅读:
    图像处理检测方法 — SIFT和SURF
    代码题(31)— 有效的括号、括号生成、最长有效括号
    代码题(30)— 二叉搜索树、二叉树的最近公共祖先
    【angularjs】使用angular搭建项目,实现隔行换色
    【css3】nth-child
    【window】Windows10下为PHP安装redis扩展
    【css】3d导航效果
    【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果
    【js】横/纵向无缝滚动
    【angularjs】使用ionic+angular 搭建移动端项目,字体适配
  • 原文地址:https://www.cnblogs.com/xiaofengfeng/p/1808788.html
Copyright © 2011-2022 走看看