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

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>

The content wrapper contains a table which holds some data which size is unknown, and must not be wrapped so white-space:nowrap is set, and it works fine. 内容包装器包含一个表，该表保存一些大小未知的数据，并且不得包装，因此设置了white-space：nowrap，并且它工作正常。 The height of the content div has a fixed size and the vertical scrollbar appears ok. 内容div的高度具有固定大小，垂直滚动条显示正常。 The main div's width is set to 95%. 主div的宽度设置为95％。 The problem is that the content div does not activates the scrollbar when the data is too long to fit, instead it resizes itself to the right side of the screen, even if the wrapper main div's width is set to 95%. 问题是，当数据太长而不适合时，内容div不会激活滚动条，而是将其自身调整到屏幕的右侧，即使包装主div的宽度设置为95％。 Is there a way to activate the content div's horizontal scrollbar without setting it's width? 有没有办法激活内容div的水平滚动条而不设置它的宽度？ It's maximum width should be in line with the width of the main wrapper, it would not be a problem even if it has a fixed width, but then it must fill the remaining area to be in line with it's wrapper main div which as I mentioned has it's width set to 95%. 它的最大宽度应该与主包装的宽度一致，即使它有一个固定的宽度也不会有问题，但是它必须填充剩余的区域以与它的包装主div一致，正如我所提到的那样它的宽度设置为95％。 I searched everywhere, days are passing and I simply can't figure out a right solution. 我到处搜索，几天过去了，我根本无法找到正确的解决方案。 Please if anyone has a suggestion I would appreciate it very much. 如果有人有任何建议，我会非常感激。 Thanks. 谢谢。

Answer 1

The inner <div> will stay inside the container <div> with the CSS you have. 内部<div>将使用您拥有的CSS保留在容器<div>中。 But, because you have a <table> surrounding the inner <div> it doesn't behave as expected. 但是，因为你有一个围绕内部<div>的<table> ，它的行为并不像预期的那样。

I think the solution may be to layout the page without the <table> . 我认为解决方案可能是在没有<table>情况下布局页面。

This example shows the inner <div> being constrained inside the outer <div> using your current CSS. 此示例显示使用当前CSS将内部<div>约束在外部<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 个解决方案

解决方案1
4 已采纳 2011-08-31 20:49:00

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2011-08-31 20:49:00

解决方案1
4 已采纳 2011-08-31 20:49:00