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

Sto tentando di mostrare alcuni dettagli di una ricezione in una tabella.Posso usare un'altezza minima per table, tr o td?

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

ho provate con questo css:

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

Ma non sta funzionando.

Grazie in anticipo.

fonte

2013-10-17 kilkadg

Sarebbe utile se si crea un violino per noi per provare il codice. – mavrosxristoforos

Non è una bella soluzione, ma provate in questo modo:

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

e impostare i div al min-height:

div { 
    min-height: 300px; 
}

Spero che questo è ciò che si vuole ...

fonte

2013-10-17 16:28:49

@SackySan è necessario fornire le classi divs e quindi applicare questa regola solo a quella classe. –

In CSS 2.1, l'effetto di 'min-altezza' e 'altezza massima' su tabelle, tabelle in linea, celle di tabella, righe di tabella e gruppi di righe non è definito.

Quindi provare avvolgendo il contenuto in un div, e dare il div un min-height jsFiddle here

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

fonte

2013-10-17 16:31:07

222

height per td opere come min-height

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

fonte

2014-08-15 15:11:53

hai ragione! eccezionale! –

+42

Io voto per cambiare questa soluzione come quella corretta. – Luke

Nel mio Google Chrome (versione 47.0.2526.106 m) in esecuzione su un Windows 7, ho trovato che l'impostazione di 'height' di un' td' in realtà viene elaborata come un 'padding' in alto e in basso, che può introdurre qualche problema di layout come pensi che sia davvero uno spazio di altezza. Non viene visualizzato come uno stile o come uno stile calcolato negli strumenti di sviluppo, ma quando si passa il mouse sopra l'elemento html ispezionato è mostrato sullo schermo. –

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

fonte

2015-07-15 21:59:37 frank

La soluzione senza div viene utilizzata come pseudo elemento come ::after nel primo td nella riga con min-height. Salva il tuo HTML pulito.

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

fonte

2016-05-09 12:07:06 omelniz

Basta usare la voce css di min-altezza in una delle celle della riga della tabella. Funziona anche con 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>

fonte

2017-03-21 01:41:31

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

risposta

Problemi correlati