Affichage: Bloc ne fonctionnant pas dans Chrome ou Safari

J'ai un simple besoin pour afficher les cellules d'une ligne de tableau à la verticale. Cela fonctionne très bien dans les FF, mais pas dans Chrome ou Safari sur l'Ipad.

L'exemple ci-dessous rend comme prévu dans FF, chaque cellule de la ligne sous les uns des autres, mais dans Chrome, il semble ignorer le display:block tout à fait.

Quel est le problème - ou est-il une meilleure façon de le faire.

(La raison pour vouloir c'est que im en utilisant @media dans le CSS pour le rendu de la table différemment pour un petit écran)

pour un visuel plus exemple:

Une table normale pourrait être

DATA1 | DATA2 | DATA3

mais avec display:block, il devrait être

DATA1
DATA2
DATA3

Merci Beaucoup

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

source d'informationauteur graemegets

  1. 55

    EDIT 2:

    Je pense que j'ai travaillé votre problème. Webkit remplace display: block; et le calcule de l'être display: table-cell; dans un td quand il n'y a pas de <!DOCTYPE> déclarées pour votre html.

    Pour corriger cela, je vous recommande de définir <!DOCTYPE html> avant <html> en haut de votre code html.

    La raison pour laquelle le jsfiddle de travailler est parce que le site a un <!DOCTYPE> déjà déclaré.

    Essayer cela et laissez-moi savoir si cela résout votre problème. Si pas, je vais essayer de trouver une autre réponse.

  2. 0

    Table cassée dans Chrome ou Safari

    De nombreux cas se produit dans tabless. 

    display:block;  
display:"";

    ou

    display:block;
display:table-row; 
*display:block;
  3. 0

    J'ai fait un truc avec l'aide de th au lieu de td.
    Et un css hack qui ne s'applique que sur safari (pas webkit général).

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

    Voici mon jsfiddle