Могу ли я использовать минимальную высоту для таблицы, tr или td?

Я пытаюсь показать некоторые детали приема в таблице.

Я хочу, чтобы эта таблица имела минимальную высоту для отображения продуктов. Поэтому, если есть только один продукт, в конце таблицы будет по крайней мере некоторое свободное пространство. С другой стороны, если есть 5 или более продуктов, это будет не пустое пространство.

Я попробовал с этим css:

table,td,tr{
  min-height:300px;
}

Но он не работает.

Спасибо заранее.

Ответы

Ответ 1

Это нехорошее решение, но попробуйте вот так:

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

и установите divs на min-height:

div {
    min-height: 300px;
}

Надеюсь, это то, что вы хотите...

Ответ 2

height для td работает как min-height:

td {
  height: 100px;
}

вместо

td {
  min-height: 100px;
}

Ячейки таблицы будут расти, когда содержимое не подходит.

https://jsfiddle.net/qz70zps4/

Ответ 3

В решении без div используется псевдоэлемент типа ::after в первый td в строке с min-height. Сохраните свой HTML-код.

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}

Ответ 4

В CSS 2.1 влияние "min-height" и "max-height" на таблицы, встроенные таблицы, ячейки таблицы, строки таблицы и группы строк undefined.

Итак, попробуйте обернуть содержимое в div и дайте div a min-height jsFiddle здесь

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

Ответ 5

если вы установили style = "height: 100px;" на td, если td имеет контент, который увеличивает ячейку больше, это не потребует минимальной высоты на td.

Ответ 6

Просто используйте css-запись min-height для одной из ячеек вашей строки таблицы. Работает и с старыми браузерами.

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>

Ответ 7

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