Как сделать CSS-прокрутку таблицы? - PullRequest
Новая
       25

Как сделать CSS-прокрутку таблицы?

3 голосов
/ 30 апреля 2010

Я хочу иметь возможность устанавливать высоту таблицы и заставлять ячейки прокручиваться по отдельности, если они больше таблицы.

Рассмотрим следующий код: (см. Его в действии здесь ) 

<div style="display: table; position: absolute;
    width: 25%; height: 80%; min-height: 80%; max-height: 80%;
    left: 0%; top: 10%; right: 75%; bottom: 10%; border: solid 1px black;">
    <div style="display: table-row;">
        <div style="display: table-cell; border: solid 1px blue;">
            {Some dynamic text content}<br/>
            This cell should shrink to fit its contents.
        </div>
    </div>
    <div style="display: table-row;">
        <div style="display: table-cell; border: solid 1px red;
            overflow: scroll;">
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
        </div>
    </div>
</div>

Если вы откроете этот код (в моем случае, в IE8), вы заметите, что вторая ячейка хорошо вписывается в таблицу, когда браузер развернут. Теоретически, когда вы сжимаете браузер (а также сокращаете таблицу), вертикальная полоса прокрутки должна появляться ВНУТРИ второй ячейки, когда таблица становится слишком маленькой, чтобы вместить весь контент. Но на самом деле таблица просто растет вертикально, за пределы, установленные атрибутом (ами) CSS height.

Надеюсь, я адекватно объяснил этот сценарий ...

Кто-нибудь знает, как я могу заставить это работать?

Ответы [ 2 ]

1 голос
/ 08 мая 2015

очень старый вопрос; но все еще № 2 в Google, когда я искал ту же тему.

Простое решение, которое я нашел, - это обернуть содержимое элемента «нужно прокрутить div» в другой div. Не знаю почему; но элементы с «display: table-cell» не прокручиваются. Но элементы внутри них могут. Так что поместите div внутри и установите его для прокрутки!

1 голос
/ 30 апреля 2010

Чтобы получить такое поведение, вам, возможно, придется просто избегать модели таблицы CSS и создать свой собственный дисплей в стиле таблицы с плавающей точкой, настройкой ширины / высоты и т. Д.

...