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

<p>я пытаюсь оформить страницу, где есть несколько таблиц. кажется, что оформление таблиц гораздо более болезненно, чем должно быть.</p><p>проблема в следующем. таблицы должны иметь фиксированную высоту и отображать либо пустое пространство внизу - когда контента слишком мало - либо вертикальную полосу прокрутки - когда их слишком много. добавьте к этому, что таблицы имеют заголовок, который не должен прокручиваться.</p><p>насколько я знаю, <code>thead</code> без прокрутки является поведением по умолчанию для таблиц. и растяжение <code>tfoot</code> может хорошо служить для заполнения пустого пространства. к сожалению, кажется, что каждое ограничение, которое я могу наложить на высоту стола, весело игнорируется. я пытался</p><pre><code>table { height: 600px; overflow: scroll; } </code></pre><p>я пытался с <code>max-height</code>. я попытался расположить таблицу абсолютно и дать верхнюю и нижнюю координаты. я попытался вручную отредактировать высоту в firebug, чтобы увидеть, была ли это проблема со спецификой css. я попытался установить высоту на <code>tbody</code> тоже. факт,<strong> таблица всегда остается точно такой же высокой, как и ее содержание </strong>, независимо от моих усилий.</p><p>конечно, я мог бы подделать таблицу со структурой div, но на самом деле это<strong> есть </strong>таблица, и я боюсь, используя div, я могу столкнуться с проблемой, когда некоторые столбцы могут быть неправильно выровнены.</p><blockquote> <p>как я должен дать столу высоту?</p> </blockquote>

<p><strong>note</strong> <a href="https://stackoverflow.com/questions/8970362/setting-a-max-height-on-a-table/13131562#comment22980817\_13131562">этот ответ теперь неверен</a> . я могу вернуться к этому позже.</p><p>как уже отмечали другие, вы <a href="https://stackoverflow.com/questions/1754136/how-to-fix-the-table-height">не можете установить высоту таблицы</a> , если вы не установите ее отображение на <code>block</code>, но тогда вы получите прокручиваемый заголовок. итак, вам нужно установить <code>height</code> и <code>display:block</code> только для <code>tbody</code>:</p><pre><code><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> </code></pre><p>вот <a href="http://jsfiddle.net/dandv/jpgek/">скрипка</a> .</p>

<p>добавьте <code>display:block;</code> к css таблицы. (другими словами .. сказать таблице, чтобы она действовала как элемент блока, а не как таблица.)</p><p> <a href="http://jsfiddle.net/notinuse/kzvbf/">скрипка здесь</a> </p>

<p>вы можете сделать это с помощью следующего css.</p><pre><code>.scroll-thead{ width: 100%; display: inline-table; } .scroll-tbody-y { display: block; overflow-y: scroll; } .table-body{ height: /*fix height here*/; } </code></pre><p>ниже приводится html.</p><pre><code><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> </code></pre><p> <a href="https://jsfiddle.net/sibijohn72/pyymzre6/">jsfiddle</a> </p>

<p>я попросил коллегу спросить, как это сделать сегодня, и вот что я придумал. я не люблю это, но это <em>is</em> способ сделать это без js и иметь уважаемые заголовки. однако главный недостаток заключается в том, что вы теряете некоторую семантику из-за того, что у вас больше нет истинного заголовка таблицы.</p><p>по сути, я обертываю таблицу в таблицу и использую div в качестве контейнера прокрутки, передав ему <code>max-height</code>. поскольку я обертываю таблицу в родительской таблице, «объединяя» строки поддельного заголовка, создается впечатление, что таблица их учитывает, но в действительности дочерняя таблица просто имеет одинаковое количество строк.</p><p>одна небольшая проблема из-за того, что полоса прокрутки занимает пространство, ширина столбцов дочерней таблицы не совпадает точно.</p><p><strong> <a href="http://jsfiddle.net/loktar/otq818v2/">live demo</a> </strong></p><p><strong>разметка</strong></p><pre><code><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> </code></pre><p><strong>css</strong></p><pre><code>.table-container { border:1px solid #ccc; border-radius: 3px; width:50%; } .table-container table { width: 100%; } .scroll-container{ max-height: 150px; overflow-y: scroll; } </code></pre>

<p>используйте div с максимальной высотой и минимальной высотой вокруг содержимого, которое необходимо прокрутить.</p><pre><code><tr> <td> <div>content</div> </td> </tr> td div{ max-height:20px; } </code></pre><p> <a href="https://jsfiddle.net/ethanabrace/4w0ksczr/">https://jsfiddle.net/ethanabrace/4w0ksczr/</a> </p>

<p>кажется, очень похоже на <a href="https://stackoverflow.com/questions/4457274/css-how-to-specify-tables-height-such-that-a-vertical-scroll-bar-appears">это</a> вопрос. оттуда кажется, что это должно сработать:</p><pre><code>table { display: block; /* important */ height: 600px; overflow-y: scroll; } </code></pre>