Posso usare un'altezza minima per table, tr o td?

120

Sto cercando di mostrare alcuni dettagli di una ricezione in una tabella.

Voglio che il tavolo abbia un'altezza minima per mostrare i prodotti. Quindi, se c'è un solo prodotto, la tabella avrebbe almeno uno spazio bianco alla fine. D'altra parte se ci sono 5 o più prodotti, non sarà quello spazio vuoto.

Ho provato con questo css:

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

Ma non sta funzionando.

Grazie in anticipo.

html css

— kilkadg
fonte

1

Sarebbe utile se crei un violino per farci provare il tuo codice.

— mavrosxristoforos

39

Non è una bella soluzione ma provala in questo modo:

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

e imposta i div sull'altezza minima:

div {
    min-height: 300px;
}

Spero che questo sia quello che vuoi ...

— Arnold Zak
fonte

2

@SackySan devi dare le classi div e quindi applicare questa regola solo a quella classe

— Zachary Weixelbaum

408

height per td opere come min-height:

td {
  height: 100px;
}

invece di

td {
  min-height: 100px;
}

Le celle della tabella cresceranno quando il contenuto non si adatta.

https://jsfiddle.net/qz70zps4/

— Aureliano Far Suau
fonte

2

Nel mio Google Chrome (versione 47.0.2526.106 m) in esecuzione su Windows 7, ho scoperto che l'impostazione heightdi a in tdrealtà viene elaborata come una parte paddingsuperiore e una inferiore, il che può introdurre qualche problema di layout poiché pensi che sia davvero uno heightspazio. Non viene visualizzato come uno stile o come uno stile calcolato negli strumenti di sviluppo, ma quando si posiziona il mouse sull'elemento html ispezionato viene visualizzato sullo schermo.

— Felypp Oliveira

ma la domanda era sull'altezza minima che non funziona! cosa succede se hai un testo lungo e hai bisogno di un'altra riga con altezza, verrà incasinato

— CMS

come ha detto @CMS, ha chiesto di min-heightno heightperché @frank spiega di seguito che si comporta allo stesso modo per table td. Quindi forse questo ha bisogno di una spiegazione un po 'migliore.

— dft

3

Questa è sicuramente una risposta migliore di quella accettata.

— Jinjubei

2

Questa risposta mi ha appena risparmiato potenzialmente ore di lavoro, dovrebbe essere la risposta.

— Luke Pring il

28

La soluzione senza divviene utilizzato uno pseudo elemento come ::afternel primo tddi fila con min-height. Salva il tuo HTML pulito.

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

— Alex Omelnitckii
fonte

13

In CSS 2.1, l'effetto di "min-height" e "max-height" su tabelle, tabelle inline, celle di tabelle, righe di tabelle e gruppi di righe non è definito.

Quindi prova a racchiudere il contenuto in un div e dai al div un min-height jsFiddle qui

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

5

se imposti style = "height: 100px;" su un td se il td ha un contenuto che fa crescere la cella più di quello, lo farà senza bisogno di altezza minima su un td.

— Franco
fonte

0

Le tabelle e le celle della tabella non utilizzano la min-heightproprietà, impostando la loro heightaltezza minima poiché le tabelle si espandono se il contenuto le allunga.

— Agu Dondo
fonte

-1

Usa semplicemente la voce css di min-height su una delle celle della riga della tabella. Funziona anche su vecchi browser.

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