Czy mogę użyć minimalnej wysokości dla tabeli, tr lub td?

120

Próbuję pokazać niektóre szczegóły odbioru w tabeli.

Chcę, aby ten stół miał minimalną wysokość, aby pokazać produkty. Więc jeśli jest tylko jeden produkt, tabela będzie miała przynajmniej trochę spacji na końcu. Z drugiej strony, jeśli jest 5 lub więcej produktów, nie będzie to puste miejsce.

Spróbuję z tym css:

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

Ale to nie działa.

Z góry dziękuję.

html css

— kilkadg
źródło

1

Byłoby pomocne, gdybyś stworzył dla nas skrzypce, abyśmy mogli wypróbować Twój kod.

— mavrosxristoforos

39

To nie jest miłe rozwiązanie, ale spróbuj tego w ten sposób:

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

i ustaw elementy div na minimalną wysokość:

div {
    min-height: 300px;
}

Mam nadzieję, że tego chcesz ...

— Arnold Zak
źródło

2

@SackySan trzeba dać klasy div, a następnie dokonać zasada ta stosuje się tylko do tej klasy

— Zachary Weixelbaum

To wcale nie jest miłe!

— Ahmad

408

heightdo tdprac takich jak min-height:

td {
  height: 100px;
}

zamiast

td {
  min-height: 100px;
}

Komórki tabeli będą rosły, gdy zawartość nie będzie pasować.

https://jsfiddle.net/qz70zps4/

— Aureliano Far Suau
źródło

2

W mojej przeglądarce Google Chrome (wersja 47.0.2526.106 m) działającej w systemie Windows 7 zauważyłem, że ustawienie heighta tdfaktycznie jest przetwarzane jako paddinggóra i dół, co może powodować problem z układem, ponieważ myślisz, że to naprawdę heightspacja. Nie jest wyświetlany jako styl ani jako styl obliczeniowy w narzędziach deweloperskich, ale po umieszczeniu kursora myszy nad sprawdzanym elementem html jest on wyświetlany na ekranie.

— Felypp Oliveira

ale pytanie dotyczyło minimalnej wysokości, która nie działa! co się stanie, jeśli masz długi tekst i potrzebujesz kolejnej linii z wysokością, zostanie pomieszana

— CMS

jak powiedział @CMS, zapytał o min-heightnie, heightale jak wyjaśnia @frank poniżej, zachowuje się tak samo table td. Więc może to wymaga trochę lepszego wyjaśnienia.

— dft

3

To zdecydowanie lepsza odpowiedź niż przyjęta.

— Jinjubei

2

Ta odpowiedź właśnie zaoszczędziła mi godzin pracy, powinna być odpowiedzią.

— Luke Pring

28

Rozwiązanie bez divużywa pseudoelementu jak ::afterw pierwszym tdw rzędzie z min-height. Zapisz czysty kod HTML.

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

— Alex Omelnitckii
źródło

13

W CSS 2.1 wpływ wartości „min-height” i „max-height” na tabele, tabele w wierszu, komórki tabel, wiersze tabeli i grupy wierszy jest niezdefiniowany.

Spróbuj więc zawinąć zawartość w element div i nadaj min-height mu tutaj 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>

— Sobin Augustine
źródło

5

jeśli ustawisz style = "wysokość: 100px;" na td, jeśli td ma zawartość, która powiększa komórkę bardziej niż to, nie będzie potrzebować minimalnej wysokości na td.

— szczery
źródło

0

Tabele i komórki tabel nie używają tej min-heightwłaściwości, ustawienie ich heightbędzie minimalną wysokością, ponieważ tabele będą się rozszerzać, jeśli zawartość je rozciąga.

— Agu Dondo
źródło

-1

Po prostu użyj wpisu css min-height do jednej z komórek w wierszu tabeli. Działa również na starych przeglądarkach.

.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>

— Sacky San
źródło