• 技术文章 >web前端 >css教程

    css如何隐藏表格

    醉折花枝作酒筹醉折花枝作酒筹2021-04-21 14:27:32原创439

    在css中,可以使用display属性隐藏表格,只需要给tr元素设置“display:none”样式即可。display属性用于定义建立布局时元素生成的显示框类型,当值为none时,表示该元素不会被显示,并脱离文档流,不占实际空间。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    新建一个html文件,命名为test.html,在test.html文件内,使用table标签创建一个三行两列的表格。

    在test.html文件内,设置第二行的id属性为mytarget,下面使用css将它隐藏。

    <body>
        <table border="1">
            <tr>
                <td>19999</td>
                <td>19999</td>
            </tr>
            <tr id="mytarget">
                <td>19999</td>
                <td>19999</td>
            </tr>
            <tr>
                <td>19999</td>
                <td>19999</td>
            </tr>
        </table>
    </body>

    在css标签内,通过table设置表格的宽度为280px,高度为180px。通过id设置表格第二行的样式,将display属性设置为none,实现将它隐藏。

    <style>
    table{
        width: 280px;
        height: 180px;
    }
    #mytarget{
        display:none;
    }
    </style>

    在浏览器打开test.html文件,查看实现的效果。

    WBQO({G[%7}@D_(RL)7)8AC.png

    推荐学习:css视频教程

    以上就是css如何隐藏表格的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 表格
    上一篇:css怎么给表格设置边框 下一篇:css怎么设置div的边框样式
    大前端线上培训班

    相关文章推荐

    • 深入了解CSS中的@property特性• css如何设置浮动• css中div高度怎么设置• css怎么设置文件编码• css内边框如何设置

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网