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

96

Ho un piccolo problema. Sto usando FireFox 3.6 e ho la seguente struttura DOM:

<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 lo tolgo display:table-rowapparirà correttamente, view-rowmostrando una larghezza del 100%. Se lo rimetto a posto, si rimpicciolisce. L'ho messo su JS Bin:

http://jsbin.com/ifiyo

Cosa sta succedendo?

css

— amico del caso
fonte

90

Se stai usando display:table-rowecc., Allora hai bisogno di un markup appropriato, che include una tabella contenente. Senza di esso la tua domanda originale fornisce fondamentalmente l'equivalente cattivo markup di:

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

Dov'è la tabella sopra? Non si può semplicemente avere una fila fuori dal nulla (tr deve essere contenuta in entrambi table, thead, tbody, etc.)

Invece, aggiungi un elemento esterno con display:table, metti la larghezza del 100% sull'elemento contenitore. Le due celle interne andranno automaticamente a 50/50 e allineeranno il testo a destra sulla seconda cella. Dimentica floatscon gli elementi della tabella. Provocherà così 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;
}

— KP.
fonte

11

+5 per sbarazzarsi di quei dannati galleggianti!

— amico di probabilità

37

-1 perché la spiegazione è semplicemente sbagliata. Secondo le specifiche CSS2.1 , il markup / CSS in questione dovrebbe funzionare.

— user123444555621

8

Nessun browser ha problemi con la tabella mancante (Firefox 3.0 aveva ...) Il problema reale è che le impostazioni di larghezza sulle righe della tabella vengono completamente ignorate . (il che significa che il markup / CSS in questione in effetti non funziona come previsto, quindi il mio commento sopra era sbagliato;))

— user123444555621

3

Questa risposta non è corretta. Il markup del richiedente è corretto. Come dice Pumbaa80, il problema è supporre che la larghezza debba essere a livello di riga invece che a livello di tabella. La larghezza viene interpretata solo a livello di tabella. Le righe possono essere completamente omesse. Vedi la mia risposta completa di seguito.

— Amin Ariana

1

Non stavo commentando la risposta che funziona. Stavo commentando il tuo commento che devi includere una riga di tabella in CSS. Non lo fai. Dire qualcosa è pseudo valido a causa delle tue convinzioni personali è una cosa molto dogmatica / rigida da dire; Soprattutto quando il CSS era completamente valido.

— Bill Rosmus

56

Risposta testata:

Nel CSS della riga .view, modifica:

display:table-row;

per:

display:table

e sbarazzarsi di "float" . Tutto funzionerà come previsto.

Come è stato suggerito nei commenti, non è necessario un tavolo da imballaggio. I CSS consentono di omettere i livelli della struttura ad albero (in questo caso le righe) che sono impliciti. Il motivo per cui il codice non funziona è che la "larghezza" può essere interpretata solo a livello di tabella, non a livello di riga di tabella. Quando hai una "tabella" e poi "celle di tabella" direttamente sotto, vengono implicitamente interpretate come se fossero disposte in fila.

Esempio di lavoro:

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

con css:

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

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

— Amin Ariana
fonte

La tua risposta suggerisce che l'equivalente CSS del <table><td></td></table>quale da solo sarebbe markup HTML non valido secondo W3C. Anche se convaliderà, perché suggeriresti di dire al browser di imitare questo markup?

— KP.

16

Questo è corretto dalle regole CSS: w3.org/TR/CSS2/tables.html#anonymous-boxes . È più facile da mantenere rimuovendo righe di codice non necessarie (ad esempio, il div <view-row> non necessario suggerito da KP.). Questo mi ha aiutato ... lo sto usando. +1

— Bill Rosmus

1

Non sarebbe sufficiente sbarazzarsi delle dichiarazioni in virgola mobile? Il div .view potrebbe mantenere la sua proprietà display: table-row.

— Ideogramma

1

Va bene, ~~ ma non funziona su IE9 per quanto ne so. ~~ Mi sbaglio. È ottimo! :)

— f1lt3r

Ovviamente display: la tabella non serve quando hai più di 1 riga.

— Risulteranno

16

Nota che secondo la specifica CSS3, NON devi racchiudere il tuo layout in un elemento in stile tabella. Il browser dedurrà l'esistenza di elementi contenenti se non esistono.

— John Carney
fonte

4

Lo stesso è stato specificato in CSS 2.1 , sezione 17.2.1, in alto 3.2. L'esempio HBOX / VBOX di seguito è esattamente il caso in questione. Quindi sembra che ai browser non importi.

— user123444555621

1

dare in .view-typeclasse float:left;o eliminare il float:right;di.view-name

modifica: avvolgi il tuo div <div class="view-row">con un altro div, ad esempio<div class="table">

e imposta il seguente css:

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

Devi usare la struttura della tabella per ottenere risultati corretti.

— Sotiris
fonte

Ho provato con ff3.6, cioè 8, chrome, opera. puoi vederlo qui jsbin.com/ifiyo/4 li mostrano fianco a fianco

— Sotiris

Stavo cercando di avere un nome all'estrema destra, digitare all'estrema sinistra ... se fai un display: inline su entrambi ed estrai il display: table-row funziona, stavo pensando che potrebbe esserci un modo migliore per fallo usando le proprietà riga / cella della tabella.

— amico di probabilità

0

Puoi annidare la tabella-cella direttamente all'interno della tabella. Devi avere un tavolo. L'avvio di una riga di una tabella non funziona. Provalo con questo HTML:

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

— rakensi
fonte