您当前的位置:主页 > 教程合集 > Html/css网站首页Html/css

table表格自适应高度的解决办法

发布时间:2017-09-21编辑:余斗阅读:(0)字号:
    在专题中需要做一个单价展示的内容,用到了table,但是发现内容过多,高度会超出页面高度,用户体验很不好,于是,这里需要写一下css来使table自适应高度,代码很简单,完整代码如下:

    <DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN">
    <html>
            <HEAD>
                    <title>table布局中自适应高度的解决办法</title>
    <style type="text/css">
    html,body{height:100%;font-size:12px;}
    td {border:1px solid red;font-size: 12px;color: #000000;margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}
    #main{border:1px solid red;width:100%;min-height:100%;min-width:100%;height:100%;overflow:hidden !important;overflow: visible;}
    #header{height:94px;border:1px solid red;}
    </style>
    </head>
    <body>
    <table id="main">
            <tr><td id="header">我的顶部</td></tr>
            <tr><td>我是主要内容</td></tr>
    </table>
    </body>
    </html>
     
    在线预览
关键字词自适应table表格
余斗余斗
  1. 转载请注明:table表格自适应高度的解决办法
  2. 版权声明:本站原创文章,由发表在Html/css分类下,于2017-09-21最后更新
JS实现模拟触发按钮点击功能
移动站上引用优酷视频时候自适应的解决方法
手机扫一扫 随身带着看
鸿运国际手机登录首页