padding-right部分在div变窄时候会被忽略

aj3423 2012-02-21 10:23:51

以下的测试代码，可以看到，window很宽时候，右边部分是有padding的，然后拖动浏览器把window变窄，这个过程中 padding-right越来越窄，直到padding完全消失，之后才出现横向滚动条，这时候拉动滚动条到最右边可以看到padding部分没了。
期望的效果是padding部分一直能保持那段空白，当滚动条拉到右边时候，能看到padding部分空着20px

请问咋改。
谢谢。

<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>

...全文

136 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

aj3423 2012-02-21

打赏
举报

[Quote=引用 2 楼 zsx841021 的回复:]

HTML code

<html>
<head>
<body>
<div>
<div style='overflow-x:scroll; border: 1px solid #000000;'>
<table style='width:100%;padding-right:20px;'>
……
[/Quote]
无敌，这样的确好了
多谢各位

Acesidonu 2012-02-21

打赏
举报

ie8下没问题

三石-gary 2012-02-21

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html>

    <head>

    <body>

        <div>

            <div style=' padding-right:20px;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>

三石-gary 2012-02-21

打赏
举报



<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>

这样应该就可以

滴滴月空雨 2012-02-21

打赏
举报

这个用padding没有办法解决，只能这样



<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>