Прокручиваемый div внутри таблицы

Question

Мне нужно поместить прокручиваемый div в ячейку таблицы. Стол должен быть на 100% высотой. У div есть много контента, который не помещается на экране, поэтому должна появиться прокрутка. Но я хочу, чтобы прокручивался только div , а не вся страница.
Если я не использую таблицу, все идеально:

<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;  border-style: solid;">
    <div>
       Item 1<br/>
       Item 2<br/>
       ...
       Item 300<br/>
    </div>
</div>

Div прокручивается, страница не имеет полосы прокрутки. Но если он завернут в таблицу:

<table style="height: 100%">
    <tr>
        <td>
            <div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;
                border-style: solid;">
                <div>
                   Item 1<br/>
                   Item 2<br/>
                   ...
                   Item 300<br/>
                </div>
            </div>
        </td>
    </tr>
</table>  

страница становится прокручиваемой, и div перестает быть таковым. Что я могу сделать?

Answer 1

Вы должны изменить свойство css макета таблицы на «фиксированное» значение.

<table style="table-layout: fixed; width: 100%;">
    <tr>
        <td>
            <div style="overflow: scroll;">
                Scrollable div
            </div>
        </td>
    </tr>
</table>

Answer 2

Думаю, ваша главная проблема в том, что вы не можете ожидать, что div достигнет 100% высоты, потому что у таблицы, в которой он находится, также есть% в качестве ширины.

Контейнер div должен иметь абсолютную высоту.

Это мой код:

<table height="2000px">
    <tr>
        <td>
            <div style="height: 100%; width: 100px; padding: 5px; overflow: scroll; border: 1px solid #000;">
                Item 1<br/>
                Item 2<br/>
                ...<br/>
                Item 300<br/>
            </div>
        </td>
    </tr>
</table>

Который использует полосу прокрутки в элементе div и из-за его высоты также позволяет отображать полосу прокрутки страницы.

К сожалению, если вы не используете какую-то хакерскую работу с CSS (что может не сработать во всех браузерах), вы не можете сказать, что div равен 100% высоты, не задав его контейнеру абсолютную высоту, как я делал выше.

Если я ошибаюсь, я уверен, что кто-то исправит меня, но я пытался дать div на 100% высоты, чтобы он соответствовал окну браузера в прошлом без хаков CSS или Javascript, и потерпел неудачу.

Answer 3

Таблицы фактически используют минимальную высоту, поэтому всякий раз, когда ваш div становится больше, чем вы хотите, столбец таблицы на самом деле просто изменяет размер, чтобы соответствовать вашему div, и поэтому ваш процент div становится бесполезным.

Вам нужноиспользуйте div, а не таблицы.

Answer 4

Не должно быть height: 100%; и overflow: auto; на <td>?