Visualizzazione CSS: la riga della tabella non si espande quando la larghezza è impostata su 100%

Ho un po 'di problemi. Sto usando Firefox 3.6 e hanno la seguente struttura DOM:Visualizzazione CSS: la riga della tabella non si espande quando la larghezza è impostata su 100%

<div class="view-row"> 
    <div class="view-type">Type</div> 
    <div class="view-name">Name</div>     
</div>

E il seguente CSS:

.view-row { 
width:100%; 
display:table-row; 
} 

.view-name { 
display: table-cell; 
float:right; 
} 

.view-type { 
display: table-cell; 
}

Se mi tolgo il display:table-row verrà visualizzato correttamente, con il view-row che mostra una larghezza di 100%. Se lo rimetto, si restringe. Ho messo questo in su su JS Bin:

http://jsbin.com/ifiyo

Cosa sta succedendo?

fonte

2010-08-13 chum of chance

Se stai usando display:table-row ecc, allora avete bisogno adeguato margine di profitto, che include una tabella che contiene. Senza di essa la tua domanda originale fondamentalmente fornisce l'equivalente cattivo markup di:

<tr style="width:100%"> 
    <td>Type</td> 
    <td style="float:right">Name</td> 
</tr>

Dov'è il tavolo in quanto sopra? Non si può semplicemente avere una fila dal nulla (tr deve essere riportata nelle table, thead, tbody, ecc)

Invece, aggiungere un elemento esterno con display:table, mettere la larghezza 100% sull'elemento contenente. Le due celle interne andranno automaticamente 50/50 e allineano il testo direttamente sulla seconda cella. Dimentica floats con elementi tabella. Farà sì tanti mal di testa.

markup:

<div class="view-table"> 
    <div class="view-row"> 
     <div class="view-type">Type</div> 
     <div class="view-name">Name</div>     
    </div> 
</div>

CSS:

.view-table 
{ 
    display:table; 
    width:100%; 
} 
.view-row, 
{ 
    display:table-row; 
} 
.view-row > div 
{ 
    display: table-cell; 
} 
.view-name 
{ 
    text-align:right; 
}

fonte

2010-08-13 19:55:24

+5 per sbarazzarsi dei dannati galleggianti! –

Mi sembra che tu possa far a meno di omettere 'display: table-row;' se il markup ha solo una riga; il 'display: table-cell;' sembra inferire una riga contenente. Se, invece, vuoi l'aspetto di un'altra o più righe, allora hai bisogno di 'display: table-row;': http://jsbin.com/ifiyo/9 – DanDan

+29

-1 perché la spiegazione è semplicemente sbagliata. Secondo le [specifiche CSS2.1] (http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes), il markup/CSS in questione dovrebbe funzionare. – user123444555621

dare il .view-type classe float:left; o eliminare la float:right; di .view-name

edit: Avvolgere la div <div class="view-row"> con un altro div per esempio <div class="table">

e impostare il seguente CSS:

.table { 
    display:table; 
    width:100%;}

Devi usare la struttura della tabella per risultati corretti.

fonte

2010-08-13 19:36:38 Sotiris

provato, non ha funzionato. –

Ho provato con ff3.6, ovvero 8, chrome, opera. puoi vederlo qui http://jsbin.com/ifiyo/4 loro li mostrano fianco a fianco – Sotiris

stavo cercando di avere un nome all'estrema destra, scrivi all'estrema sinistra ... se fai un display: inline on entrambi ed estraiamo il display: funziona come una tabella, stavo pensando che ci potrebbe essere un modo migliore di farlo usando le proprietà della tabella-riga/cella. –

nota che secondo le specifiche CSS3, NON è per avvolgere il layout in un elemento di tabella di stile. Il browser dedurrà l'esistenza di elementi di contenimento se non esistono.

fonte

2011-09-13 04:27:58

Lo stesso è stato [specificato in CSS 2.1] (http: //www.w3.org/TR/CSS2/tables.html # anonymous-boxes), sezione 17.2.1, top 3.2. L'esempio di HBOX/VBOX di seguito è esattamente il caso in questione. Quindi sembra che ai browser non importi. – user123444555621

È possibile nidificare la cella della tabella direttamente all'interno della tabella. Devi avere un tavolo. La riga di partenza di eith non funziona. Provare con questo HTML: risposta

<html> 
    <head> 
    <style type="text/css"> 
.table { 
    display: table; 
    width: 100%; 
} 
.tr { 
    display: table-row; 
    width: 100%; 
} 
.td { 
    display: table-cell; 
} 
    </style> 
    </head> 
    <body> 

    <div class="table"> 
     <div class="tr"> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
     </div> 
    </div> 

     <div class="tr"> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
     </div> 

    <div class="table"> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
    </div> 

    </body> 
</html>

fonte

2011-10-31 11:45:24 rakensi

Provato:

In.guarda la fila css, modificare:

display:table-row;

display:table

e liberati di "galleggiare". Tutto funzionerà come previsto.

Come è stato suggerito nei commenti, non è necessario un tavolo da imballaggio. Il CSS consente di omettere i livelli della struttura ad albero (in questo caso righe) che sono impliciti. Il motivo per cui il tuo codice non funziona è che "width" può essere interpretata solo a livello di tabella, non a livello di riga di tabella. Quando si ha una "tabella" e quindi una "tabella-cella" direttamente sotto, vengono implicitamente interpretate come sedute in fila.

esempio di lavoro:

<div class="view"> 
    <div>Type</div> 
    <div>Name</div>     
</div>

con i CSS:

.view { 
    width:100%; 
    display:table; 
} 

.view > div { 
    width:50%; 
    display: table-cell; 
}

fonte

2012-08-16 23:48:16

La tua risposta suggerisce l'equivalente CSS di "

" che di per sé sarebbe un codice HTML non valido come da W3C. Mentre verrà convalidato, perché suggeriresti al browser di simulare questo markup? –

+16

Questo è corretto dalle regole CSS: http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes. È più semplice da mantenere rimuovendo le righe di codice non necessarie (ad esempio, il div richiesto non consigliato da KP). Questo mi ha aiutato ... Lo sto usando. +1 – BillR

Non sarebbe sufficiente sbarazzarsi delle dichiarazioni float? Il div di .view potrebbe mantenere la sua visualizzazione: proprietà della riga di tabella. – Ideogram

Visualizzazione CSS: la riga della tabella non si espande quando la larghezza è impostata su 100%

risposta

Problemi correlati