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>

questionAnswers(3)

EDIT 2:

Ich glaube, ich habe Ihr Problem gelöst. Webkit überschreibtdisplay: block; und berechnet es zu seindisplay: table-cell; in einem td, wenn es keine gibt<!DOCTYPE> für dein html deklariert.

Um dies zu beheben, empfehle ich Ihnen gesetzt<!DOCTYPE html> Vor<html> an der Spitze Ihres HTML.

Der Grund, warum die jsfiddle funktioniert, ist, dass die Site eine hat<!DOCTYPE> bereits deklariert.

Versuchen Sie dies und lassen Sie es mich wissen, wenn es Ihr Problem behebt. Wenn nicht, werde ich versuchen, eine andere Antwort zu finden.

Ich habe einen Trick mit th's anstelle von td gemacht. Und ein CSS-Hack, der nur auf Safari angewendet wird (kein allgemeines Webkit).

HTML:

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

CSS:

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

Hier ist meinjsfiddle

Viele Fälle treten in Tablettenform auf.

<code>display:block;  
display:"";
</code>

oder

<code>display:block;
display:table-row; 
*display:block;
</code>

yourAnswerToTheQuestion