Question

#main {
margin: auto;
padding: 0;
width: 95%;
}
#left-wrapper {
display: block;
}
#content {
height: 500px;
white-space: nowrap;
overflow-y: auto;
overflow-x: scroll;
}

<div id="main">
    <table>
        <tr>
            <td>
                <div id='left-wrapper'>
                </div>
            </td>
            <td>
                <div id='content'>
                    <table>
                        <tr>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

内容包装器包含一个表，该表保存一些大小未知的数据，并且不得包装，因此设置了white-space：nowrap，并且它工作正常。内容div的高度具有固定大小，垂直滚动条显示正常。主div的宽度设置为95％。问题是，当数据太长而不适合时，内容div不会激活滚动条，而是将其自身调整到屏幕的右侧，即使包装主div的宽度设置为95％。有没有办法激活内容div的水平滚动条而不设置它的宽度？它的最大宽度应该与主包装的宽度一致，即使它有一个固定的宽度也不会有问题，但是它必须填充剩余的区域以与它的包装主div一致，正如我所提到的那样它的宽度设置为95％。我到处搜索，几天过去了，我根本无法找到正确的解决方案。如果有人有任何建议，我会非常感激。感谢。

Answer 1

内部<div>将使用您拥有的CSS保留在容器<div>内。但是，因为内部<table>周围有<div>，所以行为不符合预期。

我认为解决方案可能是在没有<table>的情况下布局页面。

此示例显示内部<div>使用您当前的CSS约束在外部<div>内。

<html>
<head>
    <style>
    #main {border:solid 2px orange; margin: auto;   padding: 0; width: 190px;}
    #left-wrapper {display: block;}
    #content {border:solid 2px purple;  height: 500px; white-space: nowrap; overflow-y: auto;   overflow-x: scroll;}
    </style>
</head>
<body>
    <div id="main">

      <div id='content'>
         <table style="border:solid 1px #ddd;">
            <tr style="background-color:#ccccff;">
               <td>column A</td>
               <td>column B</td>
               <td>column C</td>
               <td>column D</td>
               <td>column E</td>
            </tr>
            <tr>
               <td>1</td><td>2</td><td>3</td><td>2</td><td>3</td>
            </tr>
            <tr>
               <td>11</td><td>12</td><td>11</td><td>12</td><td>13</td>
            </tr>
         </table>
      </div>

    </div>
</body>
</html>

显示div overflow-x滚动条而不设置div的宽度？

1 个答案: