zoukankan      html  css  js  c++  java
  • 经常使用的两个清爽的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%" class="table"> 
    <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 class="alter"> 
    <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 
    { 
     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 class="table" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> 
    <tr> 
    <th class="spec">选择</th> 
    <th>课程名称</th> 
    <th>课程编号</th> 
    <th>已经考试次数</th> 
    </tr> 
    <tr> 
    <td class="spec">1</td> 
    <td>1</td> 
    <td class="alt">1</td> 
    <td>1</td> 
    </tr> 
    <tr class="select"> 
    <td class="spec">2</td> 
    <td>2</td> 
    <td class="alt">2</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <td class="spec">3</td> 
    <td>3</td> 
    <td class="alt">3</td> 
    <td>3</td> 
    </tr> 
    </table> 
    </body> 
    </html> 
    

      

  • 相关阅读:
    mysql各版本特点
    jQuery 获取文件后缀的方法
    jquery中动态效果
    常用CSS缩写语法总结
    判断两个时间这间间隔几分钟
    jQuery操作Cookie
    禁止表单自动提示缓存数据
    jQuery.lazyload
    Jquery.Sorttable 桌面拖拽自定义
    分享13款非常有用的 jQuery 插件
  • 原文地址:https://www.cnblogs.com/jthb/p/6786767.html
Copyright © 2011-2022 走看看