Anzeige: Block funktioniert nicht in Chrome oder Safari

Question

May 11, 2012, 07:55 PM

Anzeige: Block funktioniert nicht in Chrome oder Safari

Ich habe eine einfache Notwendigkeit, die Zellen einer Tabellenzeile vertikal anzuzeigen. Dies funktioniert gut in FF, aber nicht in Chrome oder Safari auf dem iPad.

Das folgende Beispiel wird wie erwartet in FF dargestellt, wobei sich jede Zeilenzelle untereinander befindet. In Chrome scheint es jedoch die Anzeige zu ignorieren: Blockieren insgesamt.

Was ist das Problem - oder gibt es einen besseren Weg, dies zu tun.

(Der Grund dafür ist, dass ich @media im CSS verwende, um die Tabelle für einen kleinen Bildschirm anders zu rendern.)

Für ein anschaulicheres Beispiel:

Ein normaler Tisch könnte sein

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

aber mit display: block sollte es sein

<code>DATA1
DATA2
DATA3
</code>

Danke vielmals

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