Установка максимальной высоты на столе - PullRequest
Новая
       11

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

43 голосов
/ 23 января 2012

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

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

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

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

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

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

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

Ответы [ 8 ]

27 голосов
/ 30 октября 2012

ПРИМЕЧАНИЕ этот ответ теперь неверен . Я могу вернуться к этому позже.

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

Вот скрипка .

9 голосов
/ 23 января 2012

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

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

4 голосов
/ 08 февраля 2017

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

3 голосов
/ 02 октября 2014

Я попросил коллегу спросить, как это сделать сегодня, и вот что я придумал.Мне это не нравится, но - это способ сделать это без 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;
}
0 голосов
/ 10 января 2018

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

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

td div{
    max-height:20px;
}

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

0 голосов
/ 11 августа 2015

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

AND

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

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

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

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 Solution Максимальный предел высоты для строк или ячеек путем увеличения ширины таблицы, Javascript

0 голосов
/ 15 апреля 2013 
<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

0 голосов
/ 23 января 2012

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

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