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

Odpowiedzi:

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