padding-right部分在div变窄时候会被忽略,该如何解决
日期：2014-05-17 浏览次数：20814 次
padding-right部分在div变窄时候会被忽略
以下的测试代码，可以看到，window很宽时候，右边部分是有padding的，然后拖动浏览器把window变窄，这个过程中 padding-right越来越窄，直到padding完全消失，之后才出现横向滚动条，这时候拉动滚动条到最右边可以看到padding部分没了。
期望的效果是padding部分一直能保持那段空白，当滚动条拉到右边时候，能看到padding部分空着20px
请问咋改。
谢谢。
------解决方案--------------------
这个用padding没有办法解决 ，只能这样
以下的测试代码，可以看到，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;"> </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下没问题
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
