Pantalla: Bloque que no funciona en Chrome o Safari

Question

May 11, 2012, 07:55 PM

Pantalla: Bloque que no funciona en Chrome o Safari

Tengo una simple necesidad 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.

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

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

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

Para un ejemplo más visual:

Una mesa normal podría ser

<code>DATA1 | DATA2 | DATA3
</code>

pero con display: block, debería ser

<code>DATA1
DATA2
DATA3
</code>

Muchas gracias

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