zoukankan      html  css  js  c++  java
  • div中 table 宽度100% 浏览器兼容性

    代码结构:在div中放一个表格,div设置overflow:auto,table的宽度为100%。最好在这个div前放一个兄弟浮动的div,这样效果更明显。

    问题现象:

    当表格的内容比div的高度还要高时,div会出现竖直滚动条,同时在IE6和IE7下会出现问题:此时table的100%宽度还是没有滚动条那是的宽度,出现滚动条后,div的可视宽度减少,导致横向滚动条也出现了,而且横向能滚动的长度正好是滚动条的宽度。单在IE8下就不会出现这样情况。

    问题代码:

    <div style="float:left; height:200px; background-color:#060; 100px;">f</div>
    <div style=" overflow:auto;">
    <table border="1" style="table-layout:fixed;100%;">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    .........
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    </table>
    </div>

    解决方法:内嵌套一个分区元素 Layout

    <div style="float:left; height:200px; background-color:#060; 100px;">f</div>
    <div style=" overflow:auto;">
    <div style="+zoom:1;">
    <table border="1" style="table-layout:fixed;100%;">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    .........
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    </table>
    </div>
    </div>

  • 相关阅读:
    Spring boot核心注解
    Spring-boot配置文件
    JAVA操作Excel
    操作系统之基础
    Batch Normalization
    解决ios微信页面回退不刷新的问题
    textarea高度自适应,随着内容增加高度增加
    旋转卡 可以用做登录注册
    一个页面tab标签切换,都有scroll事件的解决办法
    input type="radio" 赋值问题
  • 原文地址:https://www.cnblogs.com/z_lb/p/3135301.html
Copyright © 2011-2022 走看看