代码改变世界

CSS的table的实现,实现表格的单行边框显示,换行显示效果

2015-08-22 13:52  怡红院丿无痕  阅读(1089)  评论(0)    收藏  举报

实现的效果:

html代码:

<table width="900" cellpadding="0" cellspacing="0" class="ct">
        <thead>
            <tr>
                <td>用户标识</td>
                <td>用户姓名</td>
                <td>用户年龄</td>
                <td>用户性别</td>
                <td>用户代码</td>
                <td>用户操作</td>
            </tr>
        </thead>
        
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td></td>
            <td>001</td>
            <td>添加  删除</td>
        </tr>
        <tr class="odd_ct">
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td></td>
            <td>001</td>
            <td>添加  删除</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td></td>
            <td>001</td>
            <td>添加  删除</td>
        </tr>
        <tr class="odd_ct">
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td></td>
            <td>001</td>
            <td>添加  删除</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td></td>
            <td>001</td>
            <td>添加  删除</td>
        </tr>
        <tr class="odd_ct">
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td></td>
            <td>001</td>
            <td>添加  删除</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td></td>
            <td>001</td>
            <td>添加  删除</td>
        </tr>
    </table>    

Css代码:

<style type="text/css" media="screen">
            /*清除页面标签默认带的padding和margin*/
            * {
                padding: 0px;
                margin: 0px;
                font-size: 12px;
            }
            body {
                padding: 50px;
            }
            /*显示table的左边框和下边框*/
            table.ct {
                border-left: 1px solid #000;
                border-bottom: 1px solid #000;
            }
            /*显示table中的td的右边框和上边框,以及文本的居中*/
            table.ct td {
                border-right: 1px solid #000;
                border-top: 1px solid #000;
                height: 30px;
                text-align: center;
            }
            /*设置table中的标题,让其如内容不一样*/
            table.ct thead {
                background: #711;
                color: #fff;
            }
            /*设置隔行显示颜色*/
            tr.odd_ct {
                background: #ccc;
            }
        </style>