两个清爽的table样式

最新推荐文章于 2023-05-26 14:11:03 发布

_王川

最新推荐文章于 2023-05-26 14:11:03 发布

阅读量2.1k

点赞数

分类专栏：网站制作文章标签：网站制作

本文链接：https://blog.csdn.net/starcuan/article/details/21235921

版权

网站制作专栏收录该内容

8 篇文章 0 订阅

订阅专栏

附上两个我经常使用的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
        {
	        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>

_王川

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
两个清爽的table样式

附上两个我经常使用的table样式： body,table{ font-size:12px; } table{ table-layout:fixed; empty-cells:show; border-collapse:
复制链接

扫一扫

专栏目录