Largeur égale des cellules du tableau CSS

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

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

Existe-t-il un moyen CSS pur pour que les cellules du tableau aient la même largeur même si elles ont un contenu de taille différente?

Merci.

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

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

Vous pouvez fixer une largeur à chaque parent div(la table ), sinon elle sera de 100% comme d'habitude.

L'astuce consiste à utiliser une table-layout: fixed;certaine largeur sur chaque cellule pour la déclencher, ici 2%. Cela déclenchera l' autre 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 est table-layout: fixed; erroné (ou peut-être juste différent, très différent des autres navigateurs. Je n'ai pas relu la mise en page de la table CSS2.1 REC;)). Soyez prêt à des résultats différents.

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.

Le simple fait d'utiliser max-width: 0l' display: table-cellélément a fonctionné pour moi:

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  max-width: 0px;
  border: 1px solid gray;
}

<div class="table">
  <div class="table-cell">short</div>
  <div class="table-cell">loooooong</div>
  <div class="table-cell">Veeeeeeery loooooong</div>
</div>

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 les dispositions de tableau

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 bien fait leur travail.

À mon avis, utilisez le meilleur outil pour le travail et si vous voulez des données tabulées ou quelque chose qui ressemble à des tables de données tabulées, fonctionne simplement.

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

cela fonctionnera pour tout le monde

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

Cela fonctionnera également pour les données de table créées par itération

Voici:

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

Vous ne pouvez pas utiliser width: 100px, car l'affichage est une cellule de tableau. Vous pouvez cependant utiliser Max-width: 100px. alors votre boîte ne dépassera jamais 100px. mais vous devez ajouter overflow: hidden pour vous assurer que le contect ne saigne pas dans les autres cellules. vous pouvez également ajouter un espace blanc: nowrap si vous souhaitez empêcher la hauteur d'augmenter.

Cela peut être fait en définissant le style de cellule de tableau sur width: autoet le contenu vide. Les colonnes ont maintenant la même largeur, mais ne contiennent aucun contenu.

Pour insérer du contenu dans la cellule, ajoutez un divavec css:

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

Vous devez également ajouter position: relativeaux cellules.

Vous pouvez maintenant mettre le contenu réel dans le div mentionné ci-dessus.

https://jsfiddle.net/vensdvvb/