it-swarm.com.ru

Установка максимальной высоты на столе

Я пытаюсь оформить страницу, где есть несколько таблиц. Кажется, что оформление таблиц гораздо более болезненно, чем должно быть.

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

Насколько я знаю, thead без прокрутки является поведением по умолчанию для таблиц. И растяжение tfoot может хорошо служить для заполнения пустого пространства. К сожалению, кажется, что каждое ограничение, которое я могу наложить на высоту стола, весело игнорируется. я пытался

table {
    height: 600px;
    overflow: scroll;
}

Я пытался с max-height. Я попытался расположить таблицу абсолютно и дать верхнюю и нижнюю координаты. Я попытался вручную отредактировать высоту в Firebug, чтобы увидеть, была ли это проблема со спецификой CSS. Я попытался установить высоту на tbody тоже. Факт, таблица всегда остается точно такой же высокой, как и ее содержание , независимо от моих усилий.

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

Как я должен дать столу высоту?

39
Andrea

NOTEэтот ответ теперь неверен . Я могу вернуться к этому позже.

Как уже отмечали другие, вы не можете установить высоту таблицы , если вы не установите ее отображение на block, но тогда вы получите прокручиваемый заголовок. Итак, вам нужно установить height и display:block только для tbody:

<table style="border: 1px solid red">
    <thead>
        <tr>
            <td>Header stays put, no scrolling</td>
        </tr>
    </thead>
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
        <tr>
            <td>cell 1/1</td>
            <td>cell 1/2</td>
        </tr>
        <tr>
            <td>cell 2/1</td>
            <td>cell 2/2</td>
        </tr>
        <tr>
            <td>cell 3/1</td>
            <td>cell 3/2</td>
        </tr>
    </tbody>
</table>

Вот скрипка .

25
Dan Dascalescu

Добавьте display:block; к css таблицы. (Другими словами .. сказать таблице, чтобы она действовала как элемент блока, а не как таблица.)

скрипка здесь

8
Scott

Вы можете сделать это с помощью следующего CSS.

.scroll-thead{
    width: 100%;
    display: inline-table;
}

.scroll-tbody-y
{
    display: block;
    overflow-y: scroll;
}

.table-body{
    height: /*fix height here*/;
}

Ниже приводится HTML.

<table>
 <thead class="scroll-thead">
          <tr> 
           <th>Key</th>
           <th>Value</th>
          </tr> 
         </thead>
         <tbody class="scroll-tbody-y table-body">
          <tr> 
          <td>Blah</td> 
          <td>Blah</td> 
          </tr> 
</tbody>
</table>

JSFiddle

4
Sibi John

Я попросил коллегу спросить, как это сделать сегодня, и вот что я придумал. Я не люблю это, но это is способ сделать это без js и иметь уважаемые заголовки. Однако главный недостаток заключается в том, что вы теряете некоторую семантику из-за того, что у вас больше нет истинного заголовка таблицы.

По сути, я обертываю таблицу в таблицу и использую div в качестве контейнера прокрутки, передав ему max-height. Поскольку я обертываю таблицу в родительской таблице, «объединяя» строки поддельного заголовка, создается впечатление, что таблица их учитывает, но в действительности дочерняя таблица просто имеет одинаковое количество строк.

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

Live Demo

Разметка

<table class="table-container">
    <tbody>
        <tr>
            <td>header col 1</td>
            <td>header col 2</td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="scroll-container">
                    <table>
                        <tr>
                            <td>entry1</td>
                            <td>entry1</td>
                        </tr>
                       ........ all your entries
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.table-container {
    border:1px solid #ccc;
    border-radius: 3px;
    width:50%;
}
.table-container table {
    width: 100%;
}
.scroll-container{
    max-height: 150px;
    overflow-y: scroll;
}
3
Loktar

В таблицах для минимальной высоты ячеек таблицы или высоты строк используйте css height: вместо min-height:

А ТАКЖЕ

Для ограничения максимальной высоты всех ячеек или строк в таблице с помощью Javascript:

Этот скрипт хорош для горизонтальных таблиц переполнения.

Этот скрипт увеличивает ширину таблицы на 300 пикселей каждый раз (максимум 4000 пикселей), пока строки не уменьшатся до максимальной высоты (160 пикселей), и вы также можете редактировать числа по своему усмотрению.

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

Source: HTML Table Solution Максимальный предел высоты для строк или ячеек путем увеличения ширины таблицы, Javascript

0
Mr. Rick

Используйте div с максимальной высотой и минимальной высотой вокруг содержимого, которое необходимо прокрутить.

<tr>
    <td>
        <div>content</div>
    </td>
</tr>

td div{
    max-height:20px;
}

https://jsfiddle.net/ethanabrace/4w0ksczr/

0
Beefjeff

Кажется, очень похоже на это вопрос. Оттуда кажется, что это должно сработать:

table {
  display: block; /* important */
  height: 600px;
  overflow-y: scroll;
}
0
Wesley