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> 
    

      

  • 相关阅读:
    有点忙啊
    什么是协程
    HDU 1110 Equipment Box (判断一个大矩形里面能不能放小矩形)
    HDU 1155 Bungee Jumping(物理题,动能公式,弹性势能公式,重力势能公式)
    HDU 1210 Eddy's 洗牌问题(找规律,数学)
    HDU1214 圆桌会议(找规律,数学)
    HDU1215 七夕节(模拟 数学)
    HDU 1216 Assistance Required(暴力打表)
    HDU 1220 Cube(数学,找规律)
    HDU 1221 Rectangle and Circle(判断圆和矩形是不是相交)
  • 原文地址:https://www.cnblogs.com/jthb/p/6786767.html
Copyright © 2011-2022 走看看