Comment puis-je faire "display: block" travailler sur un <td> dans IE?

Question

Est-ce que je peux faire pour rendre IE tableau d'affichage des cellules réelle des blocs?

Compte tenu de ce style:

table,tbody,tr,td,div {
  display: block;
  border: 1px solid #0f0;
  padding: 4px;
}

Et ce code html:

<table>
  <tbody>
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
      <td>R1C3</td>
    </tr>
  </tbody>
</table>

<div>
  <div>
    <div>
      <div>R1C1</div>
      <div>R1C2</div>
      <div>R1C3</div>
    </div>
  </div>
</div>

Le tableau rend exactement le même que les divs imbriqués dans Firefox et Safari/Chrome. Mais dans Internet Explorer (8) la propriété display: block n'a pas d'effet. Le tableau rend exactement comme si je ne définissez pas cette propriété.

Mon principal problème est que les cellules ne se cassent pas, Ils ont tous rendu sur une seule ligne. (L' tbody et tr éléments n'obtenez pas de frontières ni de rembourrage. Ce n'est pas un problème pour moi, si.)

Je n'ai pas trouvé d'information sur le problème lors de la recherche. Les tableaux de compatibilité sur quirksmode et d'ailleurs les états que IE soutient display: block depuis la v. 5.5. Toute discussion sur la table les problèmes d'affichage semble être en faisant l'inverse de remise des non éléments de la table tout de l' display: table-* propriétés.

Donc, encore une fois, est-ce que je peux faire pour IE rendre les cellules d'un tableau comme bloc?

(La table réelle est vraiment une table, avec des données tabulaires. Je tiens à garder de cette façon, et de remodeler elle discrètement.)

Answer 1

J'ai appliqué float: left de trucs. Ça fonctionne.

Démonstration En Direct

Le plus gros problème est - width: 100% combiné avec l' padding est de rendre les choses trop large.

Donc:
Démonstration en direct (sans la problématique padding)

Qui ressemble un peu mieux, mais je ne suis pas sûr de savoir comment vous pouvez facilement ajouter d' padding partout si vous en avez besoin.

---

Cela échoue --> lamentablement <-- dans IE7 (il ne peut pas obtenir sur le fait que c'est un <table>), et même si vous n'avez pas de soins sur IE7, il aura besoin de peaufinage pour votre cas d'utilisation (si elle est utilisable à tous).

IE7:

Answer 2

Le suivant a fonctionné pour moi pour IE6+:

tr {
 display: block;
 position: relative
}

td.col1 {
 display: block;
 left: 0;
 top: 0;
 height: 90px;
}

td.col2 {
 display: block;
 position: absolute;
 left: 0;
 top: 30px;
}

td.col3 {
 display: block;
 position: absolute;
 left: 0;
 top: 60px;
}

Hypothèses:

• la hauteur de la cellule 30px

Inconvénients:

• Fixe la hauteur de la cellule
• La lourdeur de la spécification de l' top de la propriété (peut-être générer)
• Ne fonctionne que quand le code HTML fournit des classes pour les colonnes

Avantage:

• Fonctionne dans tous les navigateurs.

Quand utiliser:

• Lorsque vous n'avez aucun contrôle sur le langage HTML, mais avoir un contrôle sur les CSS. Certains hébergé solutions de paiement viennent à l'esprit que l'affichage dans une IFRAME et proposer une feuille de style personnalisée.