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
    
  • 相关阅读:
    Windows性能计数器应用
    Azure Oracle Linux VNC 配置
    Azure 配置管理系列 Oracle Linux (PART6)
    Azure 配置管理系列 Oracle Linux (PART5)
    Azure 配置管理系列 Oracle Linux (PART4)
    Azure 配置管理系列 Oracle Linux (PART3)
    Azure 配置管理系列 Oracle Linux (PART2)
    vagrant多节点配置
    docker基本操作
    LINUX开启允许对外访问的网络端口命令
  • 原文地址:https://www.cnblogs.com/xiaofengfeng/p/1808788.html
Copyright © 2011-2022 走看看