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

120

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

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

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

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

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

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

html css

— kilkadg
источник

1

Было бы полезно, если бы вы создали скрипку, чтобы мы могли опробовать ваш код.

— mavrosxristoforos

39

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

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

и установите для div минимальную высоту:

div {
    min-height: 300px;
}

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

— Арнольд Зак
источник

2

@SackySan, вам нужно указать классы div, а затем применить это правило только к этому классу,

— Закари Вейксельбаум,

Это совсем не хорошо!

— Ахмад

408

heightдля tdработ типа min-height:

td {
  height: 100px;
}

вместо того

td {
  min-height: 100px;
}

Ячейки таблицы будут увеличиваться, если содержимое не умещается.

https://jsfiddle.net/qz70zps4/

— Аурелиано Фар Суау
источник

2

В моем Google Chrome (версия 47.0.2526.106 m), работающем на Windows 7, я обнаружил, что установка heighta tdфактически обрабатывается как paddingверхняя и нижняя, что может вызвать некоторые проблемы с макетом, поскольку вы думаете, что это действительно heightпространство. Он не отображается как стиль или как вычисленный стиль в инструментах разработчика, но когда вы наводите указатель мыши на проверенный элемент html, он отображается на экране.

— Felypp Oliveira

но вопрос был по минимальной высоте, которая не работает! что произойдет, если у вас длинный текст и вам нужна другая строка с высотой, он испортится

— CMS

как сказал @CMS, он спросил min-heightне о том, heightоднако, как @frank объясняет ниже, он ведет себя так же table td. Так что, возможно, это требует немного лучшего объяснения.

— dft

3

Это определенно лучший ответ, чем принятый.

— Jinjubei

2

Этот ответ только что сэкономил мне потенциально часы работы, должно быть ответом.

— Люк Принг

28

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

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

— Алексей Омельницкий
источник

13

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

Так что попробуйте обернуть содержимое в div и дать div здесь 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.

— откровенный
источник

0

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

— Агу Дондо
источник

-1

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

— Саки Сан
источник