zoukankan      html  css  js  c++  java
  • CSS的table的实现,实现表格的单行边框显示,换行显示效果

    实现的效果:

    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>
  • 相关阅读:
    小米手机4 rom 下载链接
    java 两个线程交替打印到100
    获取积分最多的人(二)
    刷题通过的题目排名
    考试分数(二)
    牛客的课程订单分析(二)
    牛客的课程订单分析(三)
    docker使用小记
    Dynamic Graph Collaborative Filtering
    Learnable Embedding Sizes for Recommender Systems
  • 原文地址:https://www.cnblogs.com/zhangbaowei/p/4750144.html
Copyright © 2011-2022 走看看