Visualización CSS: la fila de la tabla no se expande cuando el ancho se establece en 100%

96

Tengo un pequeño problema. Estoy usando FireFox 3.6 y tengo la siguiente estructura DOM:

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

Y el siguiente CSS:

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

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

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

Si me quito el display:table-rowaparecerá correctamente, view-rowmostrando un ancho del 100%. Si lo vuelvo a poner, se encoge. He puesto esto en JS Bin:

http://jsbin.com/ifiyo

¿Que esta pasando?

css

— amigo de la suerte
fuente

90

Si está utilizando display:table-row, etc., necesita un marcado adecuado, que incluye una tabla contenedora. Sin ella, su pregunta original básicamente proporciona el marcado incorrecto equivalente de:

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

¿Dónde está la mesa de arriba? No se puede simplemente tener una fila de la nada (tr debe estar contenido en cualquiera de table, thead, tbody, etc.)

En su lugar, agregue un elemento exterior con display:table, ponga el 100% de ancho en el elemento contenedor. Las dos celdas internas irán automáticamente al 50/50 y alinearán el texto a la derecha en la segunda celda. Olvídese de los floatselementos de la mesa. Causará tantos dolores de cabeza.

margen:

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

11

+5 en deshacerse de los malditos flotadores!

— amigo de la suerte

37

-1 porque la explicación es simplemente incorrecta. Según las especificaciones de CSS2.1 , se supone que el marcado / CSS en cuestión funciona.

— user123444555621

8

Ningún navegador tiene problemas con la tabla que falta (Firefox 3.0 tenía ...) El problema real es que la configuración de ancho en las filas de la tabla se ignora por completo . (lo que significa que el marcado / CSS en cuestión de hecho no funciona como se esperaba, por lo que mi comentario anterior fue incorrecto;))

— user123444555621

3

Esta respuesta es incorrecta. El marcado del autor de la pregunta es correcto. Como dice Pumbaa80, el problema es asumir que el ancho debe estar a nivel de fila en lugar de a nivel de tabla. El ancho solo se interpreta a nivel de mesa. Las filas se pueden omitir por completo. Vea mi respuesta completa a continuación.

— Amin Ariana

1

No estaba comentando la respuesta que funciona. Estaba comentando su comentario de que debe incluir una fila de tabla en CSS. Tu no Decir algo es pseudo válido debido a tus creencias personales es algo muy dogmático / rígido de decir; Especialmente cuando el CSS era completamente válido.

— Bill Rosmus

56

Respuesta probada:

En el CSS .view-row, cambie:

display:table-row;

a:

display:table

y deshacerse de "flotar" . Todo funcionará como se esperaba.

Como se ha sugerido en los comentarios, no es necesaria una mesa de envolver. CSS permite omitir niveles de la estructura de árbol (en este caso filas) que están implícitos. La razón por la que su código no funciona es que el "ancho" solo se puede interpretar a nivel de tabla, no a nivel de fila de tabla. Cuando tienes una "tabla" y luego "celdas de tabla" directamente debajo, se interpretan implícitamente como sentadas en una fila.

Ejemplo de trabajo:

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

Su respuesta sugiere el equivalente de CSS <table><td></td></table>que por sí solo sería un marcado HTML no válido según W3C. Si bien se validará, ¿por qué sugeriría decirle al navegador que imite este marcado?

— KP.

16

Esto es correcto según las reglas de CSS: w3.org/TR/CSS2/tables.html#anonymous-boxes . Es más fácil de mantener eliminando líneas de código innecesarias (por ejemplo, el div <view-row> innecesario sugerido por KP). Esto me ayudó ... lo estoy usando. +1

— Bill Rosmus

1

¿No sería suficiente deshacerse de las declaraciones flotantes? El div .view podría mantener su propiedad display: table-row.

— Ideograma

1

Está bien, ~~ pero no funciona en IE9 hasta donde yo sé. ~~ Me equivoco. ¡Es genial! :)

— f1lt3r

Por supuesto, display: table no sirve de nada cuando tienes más de 1 fila. Todos resultan mal desalineados

— edc65

16

Tenga en cuenta que de acuerdo con la especificación CSS3, NO tiene que envolver su diseño en un elemento de estilo de tabla. El navegador inferirá la existencia de elementos contenedores si no existen.

— John Carney
fuente

4

Lo mismo se ha especificado en CSS 2.1 , sección 17.2.1, parte superior 3.2. El siguiente ejemplo de HBOX / VBOX es exactamente el caso en cuestión. Así que parece que a los navegadores no les importa.

— user123444555621

1

dar en .view-typeclase float:left;o eliminar el float:right;de.view-name

editar: envuelve tu div <div class="view-row">con otro div, por ejemplo<div class="table">

y establezca el siguiente CSS:

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

Debe utilizar la estructura de la tabla para obtener resultados correctos.

— Sotiris
fuente

Probé con ff3.6, es decir, 8, chrome, opera. puedes verlo aquí jsbin.com/ifiyo/4 los muestran uno al lado del otro

— Sotiris

Estaba buscando tener un nombre en el extremo derecho, escribir en el extremo izquierdo ... si hace una pantalla: en línea en ambos y saca la pantalla: fila de tabla funciona, estaba pensando que podría haber una mejor manera de hágalo usando las propiedades de tabla-fila / celda.

— amigo de la suerte

0

Puede anidar tabla-celda directamente dentro de la tabla. Debes tener una mesa. Comenzar con la fila de la tabla no funciona. Pruébelo con 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
fuente