2013-03-20 8 views
8

voglio impostare un altezza minima per tbody in css, anche se nessuno <tr><td></td></tr> in tbody, qui è il mio codice:come definire altezza minima per tbody in css

tbody{ 
    height: 500px; 
    min-height:500px; 
} 

ma non funziona. quindi cosa dovrei fare per ottenere questo? Grazie.

+1

inserire il codice in violino ... –

+0

mostrare un po 'di più il codice in modo da capire esattamente ciò che si spera di raggiungere. Può essere che un tavolo non sia la scelta giusta per quel che vuoi fare. – drmonkeyninja

+0

Probabilmente hai bisogno di aggiungere un 'width' anche se non ci sono contenuti ... –

risposta

7

Perché vuoi farlo?

L'altezza minima e l'altezza si applicano agli elementi a livello di blocco e la tabella non è un elemento a livello di blocco. Avvolgi il tuo tavolo all'interno di un div (ad esempio div.table-wrap) e applica l'altezza minima a quel div.

Se non si desidera che il layout della tabella non sia importante per l'utente, è sufficiente aggiungere display:block al CSS di tbody.

+0

scusa, non so che l'altezza minima non può essere applicata all'elemento tbody. Voglio 'tbody' lasciare uno spazio lontano da' thead' se nessun contenuto in 'tbody', e cerco solo di aggiungere' display: block', questo rende il tavolo molto brutto. Forse dovrei usare invece l'elemento 'div'. Grazie. – hiway

+2

Una tabella può avere più di uno . Mi piacerebbe che fossero un minimo di altezza. –

-1

è necessario aggiungere display: block; pure.

-1

Forse stai usando IE 5 o 6. Perché non usare solo altezza invece? Prova a rimuovere l'altezza minima perché non c'è alcun punto in cui impostare altezza e altezza minima sullo stesso elemento, perché tutto ciò che otterrai è un'altezza fissa e non un'altezza minima.

+0

è possibile aggiungere altezza ': 80%; min-height: 400px; '. La tua risposta non aiuta la domanda. –

0

Penso che questo farà,

table{height:500px !important;} 

ora questo !important renderà volontaria, saranno sovrascritti facilmente da altri attributi.

tbody non trasporta la proprietà di altezza.

contiene solo 4 proprietà 'align', 'char', 'charoff' & 'valign' come standardizzazione del CSS.

anche questo funzionerà con la cella della stessa dimensione e la spaziatura della cella aggiunta nello spazio rimanente.

tbody{ 
    height:500px; 
    display:block; 
} 

Prova e la risposta, spero che questo farà :)

+0

l'altezza minima verrà completamente ignorata dal tag tbody –

+0

Sì non supporta, ho rinviato il codice e lo ho modificato anch'io :) – MarmiK

3

Spero che questo demo funziona per voi ...

Css:

tbody{ 
    height: auto; 
    min-height:200px; 
    display:block 
    } 

Fiddle

+0

Questo non funziona per me. –

1

Avevamo bisogno dell'altezza minima sullo <tbody> perché non potevamo iniettare altri elem HTML ents (contenuto dell'utente). Ho trovato una soluzione.

L'altezza funziona per una tabella vuota, ma non se la tabella vuota ha un tbody vuoto in Chrome (59) - funziona per Firefox ed Egde. Anche altri casi nascosti <tr> hanno dato problemi, vedere JSFiddle per tutti i casi.

CSS:

.test { 
    border: 1px solid red; 
    height: 60px; 
} 

Html:

Empty table: 
<table class=test> 

</table> 

Empty tbody: 
<table class=test> 
    <tbody></tbody> 
</table> 

Chrome 59:

Chrome 59

Edge (14), IE (11), Firefox (54):

risolto questo con:

tbody:before { 
    content: ''/* needed for chrome*/ 
} 

Vedi updated JSFiddle

Problemi correlati