首页 > 其他 > 详细

两个清爽的table样式

时间:2014-03-14 15:08:04      阅读:533      评论:0      收藏:0      [点我收藏+]

附上两个我经常使用的table样式:

bubuko.com,布布扣

<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-image: url(th_bg1.gif);
            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>

bubuko.com,布布扣


<html>
<head>
    <title></title>
    <style type="text/css">

        .table
        {
	        width: 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>


两个清爽的table样式,布布扣,bubuko.com

两个清爽的table样式

原文:http://blog.csdn.net/starcuan/article/details/21235921

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!