Подтвердить что ты не робот

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

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

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

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

ЗАМЕТЬТЕ этот ответ теперь неверен. Я могу вернуться к этому позже.

Как уже отмечали другие, вы не можете установить высоту таблицы, если не установите ее отображение на 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>

Здесь скрипка.

Ответ 2

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

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

Ответ 3

Вы можете сделать это, используя следующий 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

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

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

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

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;
}

Ответ 5

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

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

Ответ 6

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

и

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

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

Этот script увеличивает ширину таблицы 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';
    }
}

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

Ответ 7

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

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

td div{
    max-height:20px;
}

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

Ответ 8

<table  style="border: 1px solid red">
            <thead>
                <tr>
                    <td>Header stays put, no scrolling</td>
                </tr>
            </thead>
            <tbody id="tbodyMain" 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>


Раздел Javascript 

<script>
$(document).ready(function(){
   var maxHeight = Math.max.apply(null, $("body").map(function () { return $(this).height(); }).get());
   // alert(maxHeight);
    var borderheight =3 ; 
    // Added some pixed into maxheight 
    // If you set border then need to add this "borderheight" to maxheight varialbe
   $("#tbodyMain").css("min-height", parseInt(maxHeight + borderheight) + "px");             
});

</script>


пожалуйста, обратитесь к разделу Как установить максимальную возможную высоту для вашего тела таблицы Fiddle Here