css table-cell equal width

Question

J'ai un nombre indéterminé d'éléments de cellules de tableau à l'intérieur d'un conteneur de tableau.

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

Existe-t-il un moyen purement CSS de faire en sorte que les cellules du tableau aient la même largeur même si leur contenu a une taille différente ?

Merci.

Edit : Avoir une largeur maximale impliquerait de savoir combien de cellules vous avez, je pense ?

Answer 1

Voici un bricolage fonctionnel avec un nombre indéterminé de cellules : http://jsfiddle.net/r9yrM/1/

Vous pouvez fixer une largeur à chaque parent div (le tableau ), sinon ce sera 100% comme d'habitude.

L'astuce consiste à utiliser table-layout: fixed; et une certaine largeur sur chaque cellule pour le déclencher, ici 2%. Cela va déclencher le autre l'algorithme de table, celui où les navigateurs s'efforcent de respecter les dimensions indiquées.
Veuillez tester avec Chrome (et IE8- si nécessaire). C'est OK avec un Safari récent mais je ne me souviens pas de la compatibilité de cette astuce avec eux.

CSS (instructions pertinentes) :

div {
    display: table;
    width: 250px;
    table-layout: fixed;
}

div > div {
    display: table-cell;
    width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

EDIT (2013) : Méfiez-vous de Safari 6 sur OS X, il a table-layout: fixed; mauvais (ou peut-être simplement différent, très différent des autres navigateurs. Je n'ai pas relu la mise en page des tableaux REC de CSS2.1 ;) ). Préparez-vous à des résultats différents.

Answer 2

HTML

<div class="table">
    <div class="table_cell">Cell-1</div>
    <div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
    <div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
    <div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>​

CSS

.table{
    display:table;
    width:100%;
    table-layout:fixed;
}
.table_cell{
    display:table-cell;
    width:100px;
    border:solid black 1px;
}

DEMO.

Answer 3

Remplacer

  <div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
  </div>

avec

  <table>
    <tr><td>content cell1</td></tr>
    <tr><td>content cell1</td></tr>
  </table>

Regardez tous les problèmes liés à la tentative de faire fonctionner les divs comme des tableaux. Ils ont dû ajouter table-xxx pour imiter la mise en page des tableaux.

Les tableaux sont pris en charge et fonctionnent très bien dans tous les navigateurs. Pourquoi les abandonner ? Le fait qu'ils aient dû les imiter est la preuve qu'ils ont fait leur travail et bien fait.

À mon avis, utilisez le meilleur outil pour le travail et si vous voulez des données tabulées ou quelque chose qui ressemble à des tableaux de données tabulées, il suffit de travailler.

Réponse très tardive, je sais, mais qui vaut la peine d'être exprimée.

Answer 4

Voilà :

http://jsfiddle.net/damsarabi/gwAdA/

Vous ne pouvez pas utiliser width : 100px, car l'affichage est de type table-cell. Vous pouvez cependant utiliser Max-width : 100px. Ainsi, votre boîte ne dépassera jamais 100px. Mais vous devez ajouter overflow:hidden pour vous assurer que le contenu ne déborde pas sur les autres cellules. Vous pouvez également ajouter white-space : nowrap si vous souhaitez empêcher la hauteur d'augmenter.