Wyświetl: blok nie działa w Chrome lub Safari

Mam prostą potrzebę wyświetlania komórek wiersza tabeli w pionie. Działa to dobrze w FF, ale nie w Chrome ani Safari na iPadzie.

Poniższy przykład renderuje zgodnie z oczekiwaniami w FF, z każdą komórką wiersza pod sobą, ale w Chrome wydaje się całkowicie ignorować blok wyświetlania:.

Jaki jest problem - czy jest lepszy sposób, aby to zrobić.

(Powodem tego jest to, że używam @media w CSS, aby renderować tabelę inaczej dla małego ekranu)

dla bardziej wizualnego przykładu:

Może być normalny stół

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

ale z display: block, powinno być

<code>DATA1
DATA2
DATA3
</code>

Wielkie dzięki

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

questionAnswers(3)

yourAnswerToTheQuestion