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
    
  • 相关阅读:
    VMware WorkStation 用 VMTools 官方下载地址 windows-vmtools tools-windows
    LeetCode Golang 9.回文数
    CentOS6.5中配置Rabbitmq3.6.6集群方案
    python之lambda、filter、map、reduce的用法讲解
    跨主机容器之间通信实现方式:etcd+flanned
    mongo3.4安装
    centos 时区的更改 UTC TO CST
    Elasticsearch5安装
    docker1.*.*版本安装
    使用weave来实现多宿主机中的docker容器之间通信
  • 原文地址:https://www.cnblogs.com/xiaofengfeng/p/1808788.html
Copyright © 2011-2022 走看看