DIV: авто переполнение внутри Ширина таблицы: 100%

Question

Я пытаюсь создать div с горизонтальной полосой прокрутки внутри таблицы с шириной 100%:

<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
    <table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
        <tr>
            <td>
                <div id="div2" style="border: thin solid black; width: 100%; height: 150px; overflow: auto;">
                    <div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
                </div>
            </td>
        </tr>
    </table>
</div>

Я не знаю почему, но во всех браузерах отображается #div2 1000pxвместо 800px.Почему это так?

Как добиться отображения шириной всего 800 пикселей и полосой прокрутки внутри #div2?

Я не хочу указывать точную ширину для тега <td>.

Answer 1

Обтекание div2 внутри таблицы из одной ячейки с style="table-layout: fixed; width: 100%" представляется решением. Смотри http://jsfiddle.net/gvqVN/1/.

Answer 2

Насколько я помню, div-ы и table-s не любят друг друга :) Попробуйте задать ширину 800px для div2. Также используйте overflow:scroll, чтобы иметь полосы прокрутки. Вот JSFiddle И код:

<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
    <table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
        <tr>
            <td>
                <div id="div2" style="border: thin solid black; width: 800px; height: 150px; overflow: scroll;">
                    <div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
                </div>
            </td>
        </tr>
    </table>
</div>

Answer 3

Поскольку дочерний элемент #div2 (#div3) имеет ширину 1000px.

Answer 4

Вам придется изменить ширину 100% на div2 с 800px, в противном случае он просто примет ширину дочернего элемента div3.

РЕДАКТИРОВАТЬ: если вы не можете использовать фиксированную ширину, вы можетеустановите отображение всех элементов таблицы: block - стандартные таблицы имеют очень неудобный способ обработки измерений, поэтому ваш пример не сработал.Недостатком этого решения, конечно, является то, что ваш стол больше не будет реагировать как стол ...

http://jsfiddle.net/WKG5F/

Answer 5

Для идентификатора div div1 добавить overflow: hidden

Ваша первая строка должна выглядеть следующим образом:

<div id="div1" style="border: thin solid red; width: 800px; height: 150px; overflow: hidden;">