«высота: 100%» на столе делает его выше, чем родитель - PullRequest
Новая
       20

«высота: 100%» на столе делает его выше, чем родитель

0 голосов
/ 28 декабря 2011

У меня есть таблица, которая состоит из строки заголовка, строки нижнего колонтитула и строки между данными.

Все значения html, body, table имеют высоту 100%.В среднем ряду также есть td с height: 100%, так что он аккуратно заполняет оставшееся пространство: http://jsfiddle.net/9cEhc/2/.

Однако, когда данные не помещаются в среднем ряду, я бы хотелпоказать полосу прокрутки, чтобы таблица сохранила свою высоту 100%, и вы можете прокручивать средний ряд.Как-то это не работает;вместо этого таблица растет в вертикальном направлении (даже при том, что CSS все еще заявляет, что ее высота должна быть 100%), и полоса прокрутки показана, но отключена (так как нечего прокручивать, поскольку таблица растянулась): http://jsfiddle.net/9cEhc/3/.

Итак, таблица установлена ​​на height: 100%, но хотя тело имеет высоту, например, 456 пикселей, высота таблицы (прямого потомка тела) составляет 1368 пикселей, чего не должно быть.

HTML: 

<table>
    <tr>
        <td>
            header
        </td>
    </tr>
    <tr class="fillup">
        <td>
            <!-- much data that doesn't fit in the row -->
        </td>
    </tr>
    <tr>
        <td>
            footer
        </td>
    </tr>
</table>

CSS: 

html, body, table, tbody {
    width: 100%;
    height: 100%;
}

html, body, table, tbody, tr, td {
    padding: 0;
    margin: 0;
}

.fillup td {
    height: 100%;
    overflow-y: scroll;
}

Как примечание, я хотел бы, чтобы это работало над Chrome.Я не особо против других браузеров.

Как можно предотвратить растяжение таблицы в случае слишком большого объема данных, и вместо этого показать полосу прокрутки для среднего ряда?

1 Ответ

3 голосов
/ 28 декабря 2011

Попробуйте это для первой проблемы (больше, чем у родителя): http://jsfiddle.net/9cEhc/4/

<table cellpadding="0" cellspacing="0">

Я не знаю, как с помощью CSS поставить пробел в ячейке.

РЕДАКТИРОВАТЬ:

Рабочая демонстрация с полосой прокрутки (Chrome): http://jsfiddle.net/9cEhc/5/

Но вам нужно записать DIV внутри тд. 

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>
            header
        </td>
    </tr>
    <tr class="fillup">
        <td>
            <DIV STYLE="overflow-y: scroll; overflow-x: no; height: 100%; width: 100%">
            list<br>list<br>list<br>list<br>list<br>list<br>
            list<br>list<br>list<br>list<br>list<br>list<br>
            ............ // and more
        </div>
        </td>
    </tr>
    <tr>
        <td>
            footer
        </td>
    </tr>
</table>
...