Faire des DIVs agir comme un tableau à l'aide de CSS

Bien, tandis que la conception d'un site, je suis tombé sur une pensée... j'ai quelques parties de mon site qui serait le mieux adapté agissant comme un tableau, mais ce n'est pas des données tabulaires. Pour quelque raison il vraiment m'énerve d'utiliser un tableau pour quelque chose qui n'est pas un tableau. J'ai donc noté CSS, options d'affichage, mais je ne peux pas le faire fonctionner à droite. Voici ce que je suis en train d'essayer. Quel est le problème?

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

C'est ce que le CSS ressemble.

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

Je voudrais que la page à l'aspect d'un tableau a été utilisé, mais les "cellules" tous aller sur une nouvelle ligne. Toutes les pensées?

Fonctionne très bien dans Firefox 3.6.12. Quel navigateur utilisez-vous?
ressemble à des données de la table pour moi. S'il vous plaît ne pas réinventer la roue avec les divisions et les noms de classe css que le miroir de la table de balisage
Réinventer la roue est ma spécialité.

InformationsquelleAutor Yoshiyahu | 2010-11-23

20

Étrange: Ce que vous citez a l'air bien, et devrait fonctionner. Êtes-vous sûr qu'il n'y est aucune justification display: block !important quelque part?

Mais comme mon avis, je vais dire que pour l'amour de Dieu, il suffit d'utiliser un tableau. 🙂

Au sérieux. Le principal argument pour ne pas utiliser des tables dans de telles situations, c'est qu'ils ne sont pas le bon élément sémantiquement. Mais en regardant div-de la soupe, vous devez admettre une <table> est la façon la plus préférable de construire, même si ce n'est pas exactement données tabulaires vous êtes l'affichage.
- Je suis totalement d'accord. Après tout, j'ai l'habitude d'utiliser des tableaux pour la conception. Cependant, avec les complications qui sont venus avec des tables, je suis passé à DIVs. Je n'aime simplement pas à l'aide de tableaux de manière incorrecte par fierté et le désir d'utiliser /correct?/ de la documentation. Ah... Il semble que j'ai eu l'émulation de la page dans IE6... Fonctionne très bien.
- Je comprends votre point, et c'est généralement une bonne philosophie de travailler avec, mais dans ce cas, le balisage nécessaire de le faire en pure CSS semble pire et est plus difficile à lire qu'un table de l'OMI, donc j'aurais tendance à faire une exception (aussi parce qu'un natif de l'élément de tableau de travaux dans IE6, alors que display-* ne fonctionne pas)
- Point de pris. À ce stade, je pense que je suis d'accord, et l'utilisation d'une table. Petite Note: Mes Sites web ne prennent pas en charge IE6. Pas vice-versa.
- Je dois passer à un div, car l'attribut contenteditable ne fonctionne pas avec table/td en Bord.
InformationsquelleAutor Pekka 웃
10

Je sais que c'est un vieux post, mais vu que personne n'a réellement résolu votre problème avec le DIV de la je pensais lui donner un aller.

Votre problème est simple...vos éléments cellulaires sont divs et, par conséquent, sont en display: block, l'utilisation s'étend sur place pour les cellules de tableau (ou ajouter display:inline à l' .cellule CSS).
```
<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>
```
- Les divs pour la .td class ne sont pas display:block, ni votre travées avec le .td class être appliquée display:inline, parce que l'auteur est déjà les .td class display:table-cell
InformationsquelleAutor Pastor Bones
5

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

Ce que vous utilisez?

(mais sérieusement, comme d'autres, de dit, l'utilisation d'une table)
- Ouais, j'étais à l'émulation à l'aide de IE6. Oublié pour passer à Firefox... :/
InformationsquelleAutor 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>

InformationsquelleAutor amit jain

3

Quel navigateur utilisez-vous? Ces valeurs ne sont pas mis en œuvre parfaitement dans tous les navigateurs. Encore, quel est le point d'essayer d'imiter les tables avec des divs+CSS? Pourquoi ne pas utiliser un tableau?

HTML créateurs d'éviter en général à l'aide de tables de données qui n'est pas de tableaux, parce que du début (quelque part dans les 10 dernières années? ne me souviens pas) jeu qui a résulté de surutilisation de tables comme éléments de mise en page. Pensez: des tables imbriquées dans des tableaux imbriqués, des cellules vides juste pour le rembourrage, etc. Get over it. Utilisez l'élément qui fait le travail.

Personnellement, je pense que table, table-row, table-cell, etc. doit avoir été laissé de côté de la CSS display spec.

InformationsquelleAutor Matt Ball

Vous devez vous connecter pour publier un commentaire.