Exibição CSS: a linha da tabela não se expande quando a largura é definida como 100%

95

Estou tendo um pequeno problema. Estou usando o FireFox 3.6 e tenho a seguinte estrutura DOM:

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

E o seguinte CSS:

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

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

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

Se eu tirar o display:table-rowele aparecerá corretamente, view-rowmostrando uma largura de 100%. Se eu colocá-lo de volta, ele encolhe. Coloquei isso no JS Bin:

http://jsbin.com/ifiyo

O que está acontecendo?

css amigo da sorte
fonte

Respostas:

90

Se estiver usando display:table-rowetc., você precisará de uma marcação adequada, que inclui uma tabela contendo. Sem isso, sua pergunta original fornece basicamente a marcação incorreta equivalente a:

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

Onde está a tabela acima? Você não pode apenas ter uma linha do nada (tr deve estar contido em qualquer table, thead, tbody, etc.)

Em vez disso, adicione um elemento externo com display:table, coloque a largura de 100% no elemento que o contém. As duas células internas irão automaticamente 50/50 e alinharão o texto à direita na segunda célula. Esqueça os floatselementos da mesa. Isso vai causar muitas dores de cabeça.

marcação:

<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 ao se livrar dos malditos carros alegóricos!
companheiro de azar
37
-1 porque a explicação está simplesmente errada. De acordo com as especificações CSS2.1 , a marcação / CSS em questão deve funcionar.
user123444555621
8
Nenhum navegador tem problemas com a tabela ausente (o Firefox 3.0 tinha ...) O problema real é que as configurações de largura nas linhas da tabela são totalmente ignoradas . (o que significa que a marcação / CSS em questão de fato não funciona conforme o esperado, então meu comentário acima estava errado;))
user123444555621
3
Esta resposta está incorreta. A marcação do autor da pergunta está correta. Como diz o Pumbaa80, o problema é assumir que a largura deve estar no nível da linha em vez de no nível da tabela. A largura é interpretada apenas no nível da tabela. As linhas podem ser completamente omitidas. Veja minha resposta completa abaixo.
Amin Ariana de
1
Eu não estava comentando sobre a resposta que funciona. Eu estava comentando sobre o seu comentário de que você deve incluir uma linha de tabela no CSS. Você não. Dizer algo é pseudo-válido por causa de suas crenças pessoais é uma coisa muito dogmática / rígida de se dizer; Principalmente quando o CSS era totalmente válido.
Bill Rosmus
56

Resposta testada:

No css .view-row, altere:

display:table-row;

para:

display:table

e se livrar de "flutuar" . Tudo funcionará conforme o esperado.

Como foi sugerido nos comentários, não há necessidade de uma mesa de envolvimento. CSS permite omitir níveis da estrutura da árvore (neste caso, linhas) que estão implícitos. O motivo pelo qual seu código não funciona é que "largura" só pode ser interpretada no nível da tabela, não no nível da linha da tabela. Quando você tem uma "mesa" e uma "célula da mesa" diretamente abaixo, elas são interpretadas implicitamente como se estivessem em uma fileira.

Exemplo de trabalho:

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

com css:

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

.view > div {
  width:50%;
  display: table-cell;
}
Amin Ariana
fonte
Sua resposta sugere que o equivalente CSS do <table><td></td></table>que, por si só, seria uma marcação HTML inválida de acordo com o W3C. Embora seja validado, por que você sugeriria dizer ao navegador para simular essa marcação?
KP.
16
Isso está correto pelas regras CSS: w3.org/TR/CSS2/tables.html#anonymous-boxes . É mais fácil de manter removendo linhas de código desnecessárias (por exemplo, o div <view-row> desnecessário sugerido pelo KP.). Isso me ajudou ... Estou usando. +1
Bill Rosmus,
1
Não seria suficiente simplesmente se livrar das instruções float? O div .view pode manter sua propriedade display: table-row.
Ideograma de
1
É bom, ~~ mas não funciona no IE9, pelo que eu sei. ~~ Estou errado. É ótimo! :)
f1lt3r
É claro que display: table não tem utilidade quando você tem mais de 1 linha. Todos eles resultam mal desalinhados
edc65
16

Observe que, de acordo com as especificações CSS3, você NÃO precisa envolver seu layout em um elemento de estilo de tabela. O navegador inferirá a existência de elementos contidos, se eles não existirem.

John Carney
fonte
4
O mesmo foi especificado no CSS 2.1 , seção 17.2.1, parte superior 3.2. O exemplo HBOX / VBOX abaixo é exatamente o caso em questão. Parece que os navegadores simplesmente não se importam.
user123444555621
1

dar na .view-typeaula float:left;ou excluir o float:right;de.view-name

editar: envolva seu div <div class="view-row">com outro div, por exemplo<div class="table">

e defina o seguinte css:

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

Você deve usar a estrutura da tabela para obter resultados corretos.

Sotiris
fonte
Testei com ff3.6, ou seja, 8, cromo, ópera. você pode ver aqui jsbin.com/ifiyo/4 eles os mostram lado a lado
Sotiris
Eu estava procurando ter o nome na extrema direita, digite na extrema esquerda ... se você fizer um display: inline em ambos e remover o display: table-row funciona, pensei que poderia haver uma maneira melhor de faça-o usando as propriedades da linha / célula da tabela.
camarada de azar
0

Você pode aninhar a célula da tabela diretamente na tabela. Você deve ter uma mesa. Iniciar a linha da tabela não funciona. Experimente com este 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