Отображать полосу прокрутки div overflow-x без установки ширины div?

#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 имеет фиксированный размер, и вертикальная полоса прокрутки выглядит нормально. Ширина основного блока установлена ​​на 95%. Проблема в том, что div содержимого не активирует полосу прокрутки, когда данные слишком длинные, чтобы поместиться, вместо этого он изменяет свой размер с правой стороны экрана, даже если ширина основного div оболочки установлена ​​на 95%. Есть ли способ активировать горизонтальную полосу прокрутки содержимого div, не устанавливая ее ширину? Его максимальная ширина должна соответствовать ширине основной оболочки, это не будет проблемой, даже если она имеет фиксированную ширину, но тогда она должна заполнить оставшуюся область, чтобы соответствовать его основному div оболочки, который, как я уже упоминал имеет ширину 95%. Я искал везде, дни проходят, а я просто не могу найти правильного решения. Пожалуйста, если у кого-то есть предложение, я был бы очень признателен. Спасибо.


html css overflow horizontal-scrolling
person andrean    schedule 31.08.2011    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Внутренний <div> останется внутри контейнера <div> с имеющимся у вас CSS. Но поскольку у вас <table> внутренний <div>, он ведет себя не так, как ожидалось.

Я думаю, что решение может заключаться в том, чтобы разметить страницу без <table>.

В этом примере показано, как внутренний <div> ограничивается внутри внешнего <div> с использованием вашего текущего CSS.

<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>
person jim31415    schedule 31.08.2011