Как кросс-браузерный способ установить максимальную высоту на столе?

Question

У меня есть таблица, где я устанавливаю высоту тела

#ml_container table>tbody{ height: 500px; overflow: auto; overflow-x: hidden; }

Проблема в том, что когда в таблице 1 запись, 1 запись имеет высоту 500 пикселей в FF3. Я хотел бы, чтобы 1 запись по-прежнему была 20px (или что бы я ни указывал). Другая проблема заключается в том, что Safari даже не распознает этот параметр в 500 пикселей, поэтому у таблицы нет максимальной высоты. Я просто хочу прокручиваемую таблицу, которая будет отображать 500px записей за один раз. Есть идеи как это сделать?

Answer 1

Вы не можете установить фиксированную или максимальную высоту для любых элементов таблицы. Свойство height рассматривается только как минимальная высота.

Вы можете добавить display: block к вашему tbody. Поскольку в этом случае это больше не один из table-* типов отображения , то будет заставлять его принимать высоту. Однако, поскольку tbody больше не является table-row-group, вы по сути получите снова неявную таблицу внутри него. Поэтому любые столбцы в любых других элементах thead, tbody или tfoot больше не будут совпадать с прокручиваемой tbody.

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

Хотя я не знаю, как это исправить в IE. Я встречал «Таблицу прокрутки в чистом CSS с фиксированным заголовком» , но это довольно устарело, поскольку оба его решения работают в IE6, но ужасно ломаются в IE7 и IE8 (тоже по-разному). Однако они do работают в режиме причуд IE, поэтому, если вам это крайне необходимо, это может быть единственным вариантом.

Answer 2

У Тома была правильная идея: использовать javascript. Если окно достаточно велико, где таблица будет слишком большой, установите фиксированную ручную высоту таблицы / элемента. : D