it-swarm.com.de

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

DATA1 | DATA2 | DATA3

aber mit display: block sollte es sein

DATA1
DATA2
DATA3

Danke vielmals

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

EDIT 2:

Ich glaube, ich habe Ihr Problem gelöst. Webkit überschreibt display: block; und berechnet es als display: table-cell; in einem td, wenn für Ihren HTML-Code kein <!DOCTYPE> deklariert ist.

Um dies zu beheben, empfehle ich Ihnen, <!DOCTYPE html> vor <html> oben in Ihrem HTML-Code zu setzen.

Der Grund, warum jsfiddle funktioniert, ist, dass für die Site bereits ein <!DOCTYPE> deklariert wurde.

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

58
frontendzzzguy

Tabelle in Chrome oder Safari gebrochen

Viele Fälle treten in Tablettenform auf.

display:block;  
display:"";

oder

display:block;
display:table-row; 
*display:block;
0
StarMomo

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:

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

CSS:

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

Hier ist meine jsfiddle

0
Chrisser