Я пытаюсь показать некоторые детали приема в таблице.
Я хочу, чтобы эта таблица имела минимальную высоту для отображения продуктов. Поэтому, если есть только один продукт, в конце таблицы будет по крайней мере некоторое свободное пространство. С другой стороны, если есть 5 или более продуктов, это будет не пустое пространство.
Я попробовал с этим css:
table,td,tr{
min-height:300px;
}
Но он не работает.
Спасибо заранее.
Это нехорошее решение, но попробуйте вот так:
<table>
<tr>
<td>
<div>Lorem</div>
</td>
</tr>
<tr>
<td>
<div>Ipsum</div>
</td>
</tr>
</table>
и установите divs на min-height:
div {
min-height: 300px;
}
Надеюсь, это то, что вы хотите...
height для td работает как min-height:
td {
height: 100px;
}
вместо
td {
min-height: 100px;
}
Ячейки таблицы будут расти, когда содержимое не подходит.
В решении без div используется псевдоэлемент типа ::after в первый td в строке с min-height. Сохраните свой HTML-код.
table tr td:first-child::after {
content: "";
display: inline-block;
vertical-align: top;
min-height: 60px;
}
В 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>
если вы установили style = "height: 100px;" на td, если td имеет контент, который увеличивает ячейку больше, это не потребует минимальной высоты на td.
Просто используйте 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>
Таблицы и ячейки таблицы не используют свойство min-height, установка их height будет минимальной высотой, поскольку таблицы будут расширяться, если содержимое их растягивает.