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>
  • 相关阅读:
    vue双向数据绑定原理解析及js代码实现
    react 实现tab切换
    vue不是内部或外部命令,解决办法
    JavaScript 基础知识 表达式和运算符
    JavaScript 基础知识 变量与数据类型
    Animation动画-小动画
    Ajax的封装
    esp32 python上位机(命令行)
    ESP32扫描环境中的所有WiFi并且通过串口选择需要连接的WiFi
    Linux修改开机图形/etc/motd
  • 原文地址:https://www.cnblogs.com/zhangbaowei/p/4750144.html
Copyright © 2011-2022 走看看