web-dev-qa-db-fra.com

Comment faire pour que "display: block" fonctionne sur un <td> dans IE?

Puis-je faire quelque chose pour que IE affiche les cellules du tableau sous forme de blocs?

Étant donné ce style:

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

Et ce 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 rendu de la table est identique à celui des div imbriquées dans Firefox et Safari/Chrome. Mais dans Internet Explorer (8), la propriété display: block n’a aucun effet. La table est rendue exactement comme si je ne définissais pas cette propriété.

Mon problème principal est que les cellules ne se cassent pas. Ils rendent tous sur une seule ligne. (Les éléments tbody et tr n'obtiennent aucune bordure ni aucun remplissage. Ce n'est pas un problème pour moi pour l'instant, cependant.)

Je n'ai trouvé aucune information sur le problème lors de la recherche. Les tableaux de compatibilité sur quirksmode et ailleurs indiquent que IE prend en charge display: block depuis la v. 5.5. Toutes les discussions sur les problèmes d'affichage de table semblent se produire lorsque vous effectuez l'inverse: attribuez aux éléments non-table l'une des propriétés display: table-*.

Donc, encore une fois, y a-t-il quelque chose que je puisse faire pour que IE rende les cellules du tableau en tant que bloc?

(La vraie table est en réalité une table, avec des données tabulaires. Je voudrais la conserver ainsi et la reformuler discrètement.)

htmlcssinternet-explorerinternet-explorer-8
37
Daniel

J'ai appliqué float: left à matériel. Cela fonctionne un peu.

démonstration en direct

Le plus gros problème est width: 100% combiné avec la padding rend les choses trop larges.

Alors:
Démo en direct (sans le problème padding)

Cela semble un peu mieux, mais je ne sais pas comment vous pouvez facilement ajouter padding partout si vous en avez besoin.

Cela échoue -> miserably <- dans IE7 (cela ne résoudra pas le fait qu'il s'agisse d'un <table>), et même si vous ne vous souciez pas de IE7, vous aurez besoin d'ajuster votre cas d'utilisation (si c'est utilisable du tout).

IE7:

enter image description here

37
thirtydot

Ce qui suit a fonctionné pour moi pour IE6 +:


 tr {
 bloc de visualisation;
 position: relative 
} 

 td.col1 {
 bloc de visualisation;
 à gauche: 0; 
 en haut: 0; 
 hauteur: 90px; 
} 

 td.col2 {
 bloc de visualisation;
 position: absolue; 
 à gauche: 0; 
 en haut: 30px; 
} 

 td.col3 {
 bloc de visualisation;
 position: absolue; 
 à gauche: 0; 
 en haut: 60px; 
}

Hypothèses:

  • hauteur de cellule 30px

Désavantages:

  • Hauteur de cellule fixe
  • Spécification fastidieuse de la propriété top (peut-être générer)
  • Ne fonctionne que lorsque HTML fournit des classes pour les colonnes

Avantage:

  • Fonctionne dans tous les navigateurs.

Quand utiliser:

  • Lorsque vous n'avez aucun contrôle sur HTML, mais avez le contrôle sur CSS. Certaines solutions de paiement hébergées viennent à l’esprit et s’affichent dans un IFRAME et offrent une feuille de style personnalisée.
4
cmc

Je viens de comprendre avec un de mes collègues.

Bien que je recommande vivement de ne pas soutenir IE8 AT TOUT DE PLUS! Étant donné que vous facilitez l’utilisation d’un produit non pris en charge et actuellement non sécurisé, qui ne respecte pas les normes et les techniques en vigueur. Il serait préférable de demander à vos utilisateurs d'effectuer une mise à niveau et de leur donner un lien de téléchargement de navigateur.

Cela étant dit. Le CSS ci-dessous est le css minimum dont vous avez besoin pour le corriger dans Internet Explorer 8.

table {
   width: 100%;
 }
 td {
   float: left;
   width: 100%;
 }
<table>
  <tbody>
    <tr>
      <td>cell-1</td>
      <td>cell-2</td>
    </tr>
  </tbody>
</table>

3
Marc van Nieuwenhuijzen

ajoutez ce code:

<!DOCTYPE html>

是 这么 的 ， ， ， ， affichage: bloc ， td 就会 ，

vous devez ajouter ce code en haut.

<!DOCTYPE html>
<html>
<head>
    <style>
        td {
            display: block;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Job Title</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div>James</div></td>
                <td><div>Matman</div></td>
                <td><div>Chief Sandwich Eater</div></td>
            </tr>
            <tr>
                <td><div>The</div></td>
                <td><div>Tick</div></td>
                <td><div>Crimefighter Sorta</div></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Ajoutez cette ligne de code en haut, mais utilisez 'float' et 'width' est très bon . Désolé, mon anglais est si médiocre.

0
Lucio Lu

faites-le display:table-row; au lieu de display:blockIl fonctionnera comme il est supposé

0
Sumit Chauhan