Pantalla: El bloque no funciona en Chrome o Safari

Tengo una necesidad simple de mostrar las celdas de una fila de la tabla verticalmente. Esto funciona bien en FF, pero no en Chrome o Safari en el Ipad.Pantalla: El bloque no funciona en Chrome o Safari

El siguiente ejemplo se muestra como se esperaba en FF, con cada celda de fila debajo de la otra, pero en Chrome, parece ignorar la pantalla: bloquear por completo.

¿Cuál es el problema, o hay una mejor manera de hacerlo?

(La razón para querer esto es que im usando @media en el CSS para representar la tabla de forma diferente para una pequeña pantalla)

para un ejemplo más visual:

Una tabla normal podría ser

DATA1 | DATA2 | DATA3

pero con display: block, debe ser

DATA1 
DATA2 
DATA3

Muchos Gracias

<html> 
<head> 
<style> 
    table, 
    thead, 
    tr, 
    td 
    { 
     display:block; 
    } 
    table,tr 
    { 
     border : 1px dotted red; 
    } 
    td 
    { 
     border:1px dashed blue; 
    } 
    thead 
    { 
     display:none; 
    } 
</style> 
</head> 
<body> 

<table> 
<thead> 
<tr> 
    <td>Heading 1</td> 
    <td>Heading 2</td> 
    <td>Heading 3</td> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Data 1</td> 
    <td>Data 2</td> 
    <td>Data 3</td> 
</tr> 
<tr> 
    <td>Data 1</td> 
    <td>Data 2</td> 
    <td>Data 3</td> 
</tr> 
<tr> 
    <td>Data 1</td> 
    <td>Data 2</td> 
    <td>Data 3</td> 
</tr> 

</tbody> 
</table> 

</body> 
</html>

Fuente

2012-05-11 graemegets

Por qué estás haciendo tablas más complicadas de lo que son? Si desea visualizar una sola tabla de columnas, simplemente haga una sola tabla de columnas; no es necesario definirlos con 'display: block;'. – Sparky

EDIT 2:

Creo que he resuelto su problema. Webkit anula display: block; y calcula que es display: table-cell; en un td cuando no hay <!DOCTYPE> declarado para su html.

Para solucionar esto le recomiendo que configure <!DOCTYPE html> antes de <html> en la parte superior de su html.

La razón por la que jsfiddle funcionará es porque el sitio tiene un <!DOCTYPE> ya declarado.

Pruebe esto y avíseme si soluciona su problema. Si no, intentaré encontrar otra respuesta.

Fuente

2012-05-11 18:13:46 frontendzzzguy

no, no es lo que quiero decir.Agregué un ejemplo de texto de lo que quiero decir con el texto principal. Avísame de esto aún no está claro. Gracias – graemegets

Agregué una captura de pantalla de mis resultados en FF y Chrome. ¿Qué versión de Chrome estás probando? – frontendzzzguy

Sí, eso es lo que espero, pero al no ejecutar mac-am en windows. Curiosamente, mi desarrollador que escribió el código (y está de vacaciones ahora) parece pensar que funcionó y está en una Mac, por lo que hay una diferencia entre Chrome en Mac y PC, aunque tampoco funciona en Safari en un Ipad – graemegets

mesa rota en Chrome o Safari

Muchos caso se produce en tabless.

display:block; 
display:"";

display:block; 
display:table-row; 
*display:block;

Fuente

2013-03-04 10:28:17 StarMomo

he hizo un truco con el uso del XX en lugar de TD. Y un hack css que solo se aplica en safari (no webkit general).

HTML:

<table> 
    <tr> 
     <th>Cell 1</th> 
     <th>Cell 2</th> 
    </tr> 
</table>

CSS:

table { 
    width: 100%; 
    text-align: left; 
} 

/* Safari 7.1+ */ 
_::-webkit-full-page-media, _:future, :root .safari_only { 
    .safari-fix table tr { 
     display: block; 
     width: 100%; 
    } 
} 
/* Safari 10.1+ */ 
@media not all and (min-resolution:.001dpcm) { 
    @media { 
     .safari-fix table tr { 
      display: block; 
      width: 100%; 
     } 
    } 
} 

table th { 
    width: 100%; 
    display: block; 
}

Aquí está mi jsfiddle

Fuente

2018-01-11 11:32:11 Chrisser

Pantalla: El bloque no funciona en Chrome o Safari

Respuesta

Cuestiones relacionadas