web-dev-qa-db-fra.com

Faire en sorte que les DIVs agissent comme une table en utilisant CSS

D'accord, lors de la conception d'un site, je suis tombé sur une pensée ... J'ai quelques parties de mon site qui seraient mieux adaptées en tant que tableau, mais ce ne sont pas des données tabulaires. Pour une raison quelconque, cela me dérange vraiment d'utiliser une table pour quelque chose qui n'est pas une table. J'ai donc noté les options d'affichage de CSS, mais je ne peux pas le faire fonctionner correctement. Voici ce que j'essaie. Quelle est la solution?

<div class="table">
  <div class="tr">
    <div class="td">Row 1, Cell 1</div>
    <div class="td">Row 1, Cell 2</div>
    <div class="td">Row 1, Cell 3</div>
  </div>
  <div class="tr">
    <div class="td">Row 2, Cell 1</div>
    <div class="td">Row 2, Cell 2</div>
    <div class="td">Row 2, Cell 3</div>
  </div>
</div>

Voici à quoi ressemble le CSS.

div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }

J'aimerais que la page ressemble à un tableau a été utilisé, mais les "cellules" vont tous sur une nouvelle ligne. Des pensées?

htmlcsscss-tables
27
Yoshiyahu

Étrange: ce que vous citez semble bien et devrait fonctionner. Êtes-vous sûr qu'il n'y a pas de substitution display: block !important quelque part?

Mais à mon avis, je vais dire que pour l'amour de Dieu, il suffit d'utiliser une table. :)

Sérieusement. L'argument principal pour ne pas utiliser de tables dans de telles situations est qu'elles ne sont pas le bon élément sémantiquement. Mais en regardant cette div-soupe, vous devez admettre un <table> est la manière la plus préférable de construire, même si ce n'est pas exactement les données tabulaires que vous affichez.

21
Pekka 웃

Je sais que c'est un vieux post, mais comme personne n'a vraiment résolu votre problème avec les DIV, j'ai pensé que j'allais essayer.

Votre problème est simple ... vos éléments de cellule sont des divs et sont donc display: block, utilisez plutôt des étendues pour les cellules de tableau (ou ajoutez display: inline au CSS .cell).

<div class="table">
  <div class="tr">
    <span class="td">Row 1, Cell 1</span>
    <span class="td">Row 1, Cell 2</span>
    <span class="td">Row 1, Cell 3</span>
  </div>
  <div class="tr">
    <span class="td">Row 2, Cell 1</span>
    <span class="td">Row 2, Cell 2</span>
    <span class="td">Row 2, Cell 3</span>
  </div>
</div>
10
Pastor Bones

Peut-être un problème de navigateur? Votre code fonctionne pour moi dans Chrome. Voir ici: http://jsfiddle.net/xVTkP/

Qu'est-ce que vous utilisez?

(mais sérieusement, comme d'autres l'ont dit, utilisez un tableau)

5
Matt
<body>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">Row 1, Cell 1</div>
            <div style="display: table-cell;">Row 1, Cell 1</div>
            <div style="display: table-cell;">Row 1, Cell 1</div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;">Row 2, Cell 1</div>
            <div style="display: table-cell;">Row 2, Cell 1</div>
            <div style="display: table-cell;">Row 2, Cell 1</div>
        </div>
    </div>
</body>
4
amit jain

Quel navigateur utilisez-vous? Ces valeurs ne sont pas implémentées parfaitement dans tous les navigateurs. Pourtant, quel est le point d'essayer d'émuler des tables avec divs + CSS? Pourquoi ne pas simplement utiliser une table?

Les créateurs HTML évitent généralement d'utiliser des tableaux pour des données qui ne sont pas tabulaires à cause du début (quelque part au cours des 10 dernières années? Je ne me souviens pas) du jeu résultant de surutilisation des tableaux comme éléments de présentation. Pensez: tables imbriquées dans des tables imbriquées, cellules vides juste pour le remplissage, etc. Dépassez-la . Utilisez l'élément qui fait le travail.

Personnellement, je pense que table, table-row, table-cell, etc. aurait dû être exclu de la spécification CSS display.

3
Matt Ball