Rede de Display: o bloco não funciona no Chrome ou no Safari

Question

May 11, 2012, 07:55 PM

Rede de Display: o bloco não funciona no Chrome ou no Safari

Eu tenho uma simples necessidade de exibir as células de uma linha da tabela verticalmente. Isso funciona muito bem no FF, mas não no Chrome ou no Safari no Ipad.

O exemplo abaixo renderiza como esperado em FF, com cada célula de linha uma em baixo da outra, mas no Chrome, parece ignorar a exibição: block total.

Qual é o problema - ou existe uma maneira melhor de fazer isso?

(A razão para querer isso é que estou usando @media no CSS para renderizar a tabela de forma diferente para uma tela pequena)

para um exemplo mais visual:

Uma tabela normal pode ser

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

mas com display: bloco, deve ser

<code>DATA1
DATA2
DATA3
</code>

Muito Obrigado

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