Min-Height per un tavolo in Firefox non funziona

Fondamentalmente, mi piacerebbe avere un’altezza minima per il mio tavolo, in modo che possa adattarsi responsabilmente ai propri mezzi. Funziona magnificamente in chrome ma a FireFox non piace, ha provato il display: block; ma questo rende le cose peggiori su Chrome.

Grazie.

.table-wrap { min-height: 323px; } table { width: 100%; min-height: 323px; } table tr { min-height: 54px; } 

cambia l’altezza minima della tavola in altezza. se il contenuto è più alto, la tabella verrà comunque ingrandita

L’effetto della proprietà min-height non è definito per tabelle, righe di tabella e celle di tabella.

Vedi: http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Supponiamo che il tuo markup assomigli al seguente codice HTML:

 
Cell 1 Donec ipsum libero...
Cell 2

Ora, considera il seguente CSS:

 .table-wrap { min-height: 323px; border: 1px dotted blue; } table { width: 400px; height: 323px; border: 1px dashed red; } table tr { height: 54px; } table td { border: 1px dotted red; } 

In questo caso, la tabella avrà un’altezza minima di 323 px e questa altezza verrà distribuita tra le varie righe della tabella in base ai dettagli del contenuto delle celle di ogni riga.

Per lo meno, ogni riga avrà un’altezza di almeno 54px.

Se hai molte righe con celle corte (meno di 54px in altezza), alla fine l’altezza del tavolo si adeguerà per accogliere le file.

Se la tabella ha solo poche righe con celle corte, le righe aumenteranno di altezza per riempire l’altezza della tabella di 323 px.

L’elemento padre .table-wrap non ha alcun effetto sull’altezza della tabella in questo caso.

Vedi fiddle su: http://jsfiddle.net/audetwebdesign/zMtBu/

Aggiungi height: 0 e questo renderà Firefox prendere l’ min-height

Sfortunatamente in particolare con Firefox questo è un bug: https://bugzilla.mozilla.org/show_bug.cgi?id=307866

 min-height: [whatever] 

non giocherà bene

 display: table 

L’unica alternativa è usare un’altezza fissa.

Caso chiuso