当前位置: 代码迷 >> HTML/CSS >> padding-right部分在div变窄时候会被忽略,该如何解决
  详细解决方案

padding-right部分在div变窄时候会被忽略,该如何解决

热度:630   发布时间:2012-03-09 21:42:55.0
padding-right部分在div变窄时候会被忽略
以下的测试代码,可以看到,window很宽时候,右边部分是有padding的,然后拖动浏览器把window变窄,这个过程中 padding-right越来越窄,直到padding完全消失,之后才出现横向滚动条,这时候拉动滚动条到最右边可以看到padding部分没了。
期望的效果是padding部分一直能保持那段空白,当滚动条拉到右边时候,能看到padding部分空着20px

请问咋改。
谢谢。

JScript code
<html>
    <head>
    <body>
        <div>
            <div style='padding-right:20px; overflow-x:scroll; border: 1px solid #000000;'>
                <table style='width:100%;'>
                    <tbody>
                        <tr>
                            <th style='min-width:200px;border:1px solid #ff0000;'>col A</th>
                            <th style='min-width:200px;border:1px solid #00ff00;'>col B</th>
                            <th style='min-width:200px;border:1px solid #0000ff;'>col C</th>
                        </tr>
                    </tbody>
                
                </table>
            </div>
        </div>
    </body>
</html>




------解决方案--------------------
这个用padding没有办法解决 ,只能这样
HTML code

<body>
        <div>
            <div style=" overflow-x:scroll; border: 1px solid #000000; ">
                <table style='width:100%;'>
                    <tbody>
                        <tr>
                            <th style='min-width:200px;border:1px solid #ff0000;'>col A</th>
                            <th style='min-width:200px;border:1px solid #00ff00;'>col B</th>
                            <th style='min-width:200px;border:1px solid #0000ff;'>col C</th>
                            <th width="20px;">&nbsp;</th>
                        </tr>
                    </tbody>
                
                </table>
            </div>
        </div>
    </body>

------解决方案--------------------
HTML code

<html>
    <head>
    <body>
        <div>
            <div style='overflow-x:scroll; border: 1px solid #000000;'>
                <table style='width:100%;padding-right:20px;'>
                    <tbody>
                        <tr>
                            <th style='min-width:200px;border:1px solid #ff0000;'>col A</th>
                            <th style='min-width:200px;border:1px solid #00ff00;'>col B</th>
                            <th style='min-width:200px;border:1px solid #0000ff;'>col C</th>
                        </tr>
                    </tbody>
                
                </table>
            </div>
        </div>
    </body>
</html>

------解决方案--------------------
ie8下没问题
  相关解决方案