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

Question

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

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

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

Я попробую с этим css:

table,td,tr{

  min-height:300px;

}

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

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

668 7

html css

7 ответов:

Comments

Ничего не найдено.

Arnold Zak · Accepted Answer · 2013-10-17 19:28:49

это не очень хорошее решение, но попробуйте так:
<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>
и установите divs на минимальную высоту:
div {
    min-height: 300px;
}
надеюсь, это то, что вы хотите ...

Aureliano Far Suau · Accepted Answer · 2018-05-15 17:23:08

height на td работы как min-height:
td {
  height: 100px;
}
вместо
td {
  min-height: 100px;
}
ячейки таблицы будут расти, когда содержимое не подходит.

http://fiddle.jshell.net/qz70zps4/

omelniz · Accepted Answer · 2016-05-09 15:43:07

решение без div используется псевдо элемент, как ::after в первом td в строку с min-height. Сохраните ваш HTML чистый.
table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}

Sobin Augustine · Accepted Answer · 2013-10-17 19:40:03

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

поэтому попробуйте обернуть содержимое в 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>

frank · Accepted Answer · 2015-07-16 00:59:37

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

Sacky San · Accepted Answer · 2017-03-21 03:41:31

просто используйте запись 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>

Agu Dondo · Accepted Answer · 2018-09-26 23:29:15

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