Largeur égale des cellules du tableau CSS


148

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?


Comment le nombre de colonnes est-il déterminé: côté client ou côté serveur?
iambriansreed

Après avoir essayé certaines méthodes, je pense que si vous voulez avoir plusieurs lignes et les voulez de largeur égale, utilisez flexbox au lieu de table
Eric

Réponses:


299

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.


1
Merci, cela semble être la réponse. Je ne sais pas pourquoi, mais si je règle la largeur à 2%, chaque colonne atteint 2%. Mais 100% semble très bien fonctionner. Une idée de ce qui se passe là-bas?
Harry

3
J'ai rencontré le même problème de devoir utiliser une largeur de 100% sur les cellules du tableau. Cela se produisait à cause d'un clearfix appliqué à l'élément parent avec display: table. Comme les cellules de largeur 100% ne fonctionnent pas dans IE8, le correctif pour moi était de supprimer le clearfix. Espérons que cela aide quelqu'un.
Alex Barrett

Pour développer cela, cela fonctionne pour les mises en page simples (1x1, 2x2, 3x3, etc.) mais les mises en page complexes (1x3x1, 1x2x3x4, etc.) nécessitent des divs supplémentaires display:tableà utiliser comme s'il s'agissait de lignes, pas display:tabl-rowcomme certains pourraient s'y attendre. Exemple ici .
filoxo

2
La largeur de 100% n'a pas fonctionné sur IE8 (surprise) mais la suggestion initiale de 2% fournit les résultats corrects.

1
La largeur à 100% ne fonctionnait pas non plus dans IE10. Cela a fonctionné dans IE11. Et 1% de largeur a permis à Mobile Safari d'afficher des colonnes très étroites. J'ai donc fini par utiliser un hack CSS ciblant IE9 et IE10: .my-cell { width: 100%; }; @media screen and (min-width:0\0) { .my-cell { width: 1%; } }Le hack CSS vient d'ici: stackoverflow.com/a/24321386/6962
Henrik N

29

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 violon ne fonctionne pas ici. Les cellules sont toujours à 25%.
netAction

Cette solution n'est pas très évolutive pour tout ce qui est dynamique, comme la navigation sur le site contrôlée par le client.
Eric K

Vous avez probablement raison et au fait, il a presque deux ans anser @QuantumDynamix. Avez-vous quelque chose de mieux en tête? Pourquoi ne pas simplement partager votre idée, faire savoir au monde de meilleures choses :-)
The Alpha

15

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>


1
Juste pinailler ici, mais ce 0pxn'est pas une unité valide. Cela devrait juste être 0.
Gavin

Cela a fonctionné pour moi, mais pouvez-vous expliquer comment cela fonctionne?
Emmanual

6

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


2
+1 parce que cela fonctionne et parce que CSS toujours, en 2014 ne le fait pas correctement dans tous les navigateurs.
Beurk le

6
Parfois, vous voulez une mise en page de type tableau pour les éléments qui ne sont pas des données tabulées. par exemple des éléments de navigation qui devraient utiliser <nav>, <ul>etc.
Ben

1
Pour réactif, il est idéal d'avoir une mise en page basée sur div. Afficher des tables sur des appareils mobiles est une douleur dans le cul.
Pablo Rincon

Essayer d'émuler une table empêche la conception réactive. Je suis d'accord si vous voulez un design réactif, les tableaux ne sont pas le choix.
DeveloperChris

2
Les tableaux ont été créés pour afficher des données tabulaires: c'était, c'est et ce seront les éléments HTML à utiliser pour afficher les données tabulaires, pourquoi quelqu'un les abandonnerait-il (à cette fin)? La mise en page des tableaux n'est pas imitée : elle fait partie de la recommandation CSS2 depuis un certain temps maintenant et il arrive que la mise en page par défaut des tableaux HTML le soit display: table-etc(tout naturellement). Je ne passe pas mes journées à créer des liens imitant des divs ou des divs imitant des tables, des étendues ou des entrées: j'utilise juste du CSS pour le style. Enfin, bonne chance avec IE9 pour appliquer toute autre valeur de displaypropriété aux éléments table, tr, td.
FelipeAls

1

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


0

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.


0

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/

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.