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>
  • 相关阅读:
    使用vscode 用git 拉取代码,提示:在签出前,请清理存储库工作树
    区分手机端和pc端加载不同的样式
    关于vue的代码规范
    各种名词汇总整理
    ZB埋点汇总
    项目实战 OLAP数据提取
    大数据intern_1总结:数据埋点以及SQL复习
    leetcode 343+279+91+64+70 动态规划
    leetcode 241 加优先级括号
    leetcode 17+79+93+46+47+77+39+40+78+90+131+37 回溯法
  • 原文地址:https://www.cnblogs.com/zhangbaowei/p/4750144.html
Copyright © 2011-2022 走看看