CSS table-cell largeur égale

J'ai un nombre indéterminé de table-cell éléments à l'intérieur d'un tableau contenant.

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

Est-il un pur CSS de façon à obtenir la table de cellules à la même largeur, même s'ils ont différentes tailles de contenu?

Grâce.

Edit: Avoir un max-width supposerait de connaître le nombre de cellules que vous avez, je pense?

Comment est le nombre de colonnes déterminé: client ou côté serveur?
Après j'ai essayé plusieurs méthodes, je pense que si vous voulez avoir plusieurs lignes et que vous souhaitez de largeur égale, l'utilisation flexbox au lieu de table

InformationsquelleAutor Harry | 2012-05-09

286

Ici est un travail de violon à durée indéterminée nombre de cellules: http://jsfiddle.net/r9yrM/1/

Vous pouvez fixer une largeur de chaque parent div (le table), sinon ça va être 100% comme d'habitude.

L'astuce est d'utiliser table-layout: fixed; et une partie de largeur sur chaque cellule de déclenchement, voici 2%. Qui va déclencher le autres table algorightm, celui où les navigateurs essayez très difficile de respecter les dimensions indiquées.

S'il vous plaît tester avec Chrome (et IE8 si nécessaire). C'est OK avec une récente Safari mais je ne me souviens pas de la compatibilité de ce truc avec eux.

CSS (les instructions):
```
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 */
}
```
ÉDITION (2013): Méfiez-vous de Safari 6 sur OS X, il a table-layout: fixed; mal (ou peut-être juste différent, très différent des autres navigateurs. Je n'ai pas le temps de relire CSS2.1 REC disposition de table 😉 ). Être préparé à des résultats différents.
- Merci, cela semble être la réponse. Je ne sais pas pourquoi, mais si je définis la largeur de 2%, il fait scrunges chaque colonne en 2%. Mais 100% semble fonctionner à merveille. Une idée de ce qui se passe là-bas?
- J'ai rencontré le même problème d'avoir à utiliser 100% de la largeur sur la table-les cellules. Ce qui se passait en raison d'une clearfix appliquée à l'élément parent avec display: table. 100% de la largeur des cellules ne fonctionne pas avec IE8, la solution pour moi a été de retirer le clearfix. Espérons que cela aide quelqu'un.
- Pour développer ce système, cela fonctionne pour présentation simple (1x1, 2x2, 3x3, etc), mais des mises en page complexes (1x3x1, 1x2x3x4, etc) nécessitent d'autres divs avec display:table être utilisées comme si elles étaient rangées, pas display:tabl-row que certains pourraient s'attendre. Exemple.
- 100% de largeur ne fonctionne pas sur IE8 (surprise), mais la suggestion initiale de 2% donne des résultats corrects.
- 100% de la largeur aussi ne fonctionne pas sur IE9. Il ne montrait que la première cellule. Changement de 1% à taux fixe, et ne semble pas casser des choses dans Chrome ou Firefox.
- 100% de la largeur de ne pas travailler dans IE10. ne travailler dans IE11. Et 1% de la largeur de Mobile Safari show super colonnes étroites. J'ai donc fini par utiliser un CSS hack ciblage IE9 et IE10: .my-cell { width: 100%; }; @media screen and (min-width:0\0) { .my-cell { width: 1%; } } Le CSS hack est ici: stackoverflow.com/a/24321386/6962
InformationsquelleAutor FelipeAls

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

DÉMO.

Le violon ne fonctionne pas ici. Les cellules sont toujours 25%.
Cette solution n'est pas très évolutif pour quelque chose de dynamique, tels que la navigation sur le site contrôlé par le client.
Probablement, vous avez raison et btw, c'est près de deux ans anser @QuantumDynamix. Rien de mieux sur l'esprit ? Pourquoi ne pas partager votre idée, de laisser le monde connaître mieux les choses 🙂

InformationsquelleAutor The Alpha

Juste en utilisant max-width: 0 dans le display: table-cell élément a fonctionné pour moi:

CSS:

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

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

HTML:

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

Juste en coupant les cheveux en quatre ici, mais 0px n'est pas valide unité. Il faut juste être 0.

InformationsquelleAutor José Antonio Postigo

5

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 aspects se rapportant à essayer de faire de divs effectuer comme des tableaux. Ils ont dû ajouter une table-xxx pour imiter des dispositions de table

Tables sont pris en charge et fonctionne très bien dans tous les navigateurs. Pourquoi le fossé entre eux? le fait qu'ils avaient de les imiter en est la preuve qu'ils ont fait leur travail et le bien.

À mon avis d'utiliser le meilleur outil pour le travail et si vous voulez que les données totalisées ou quelque chose qui ressemble à des tableaux de données de tables de travail juste.

Très Retard de réponse, je sais, mais vaut la peine d'exprimer.
- +1 parce qu'il fonctionne et parce que CSS encore, en 2014 ne le fait pas correctement sur tous les navigateurs.
- Parfois, vous voulez de la table-comme la mise en page pour des choses qui ne sont pas présentés de données. par exemple, les éléments de navigation qui devrait utiliser <nav>, <ul>, etc.
- Souple, il est idéal d'avoir un div de mise en fonction. Affichage des tableaux dans des appareils mobiles est une douleur dans le cul.
- En essayant d'imiter un tableau s'oppose à une conception adaptée. Je suis d'accord si vous voulez responsive design, les tables ne sont pas le choix.
- Les Tables ont été créées pour afficher des données tabulaires: c'était, c'est et ce sera les éléments HTML à utiliser pour afficher des données tabulaires, pourquoi quelqu'un fossé entre eux (pour cela)? Tableau de mise en page n'est pas imité: cela fait partie de la recommandation CSS2 pour un certain temps maintenant et il arrive que le défaut de mise en page de tableaux HTML est display: table-etc (tout naturellement). Je ne passe pas mes journées à faire des liens imitant les divs ou divs imitant les tables, s'étend sur ou entrées: je suis juste à l'aide de CSS pour le style. Enfin, bonne chance avec IE9 pour l'application de toute autre valeur de display bien à table, tr, td éléments.
InformationsquelleAutor DeveloperChris

cela fonctionnera pour tout le monde

HTML:

<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 aussi pour les données de la table créée par itération

InformationsquelleAutor tcasante1

0

Ici, vous allez:

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

Vous ne pouvez pas utiliser width: 100px, parce que l'affichage est table-cell. Vous pouvez cependant utiliser Max-width: 100px. ensuite votre boîte ne sera jamais plus grand que 100px. mais vous devez ajouter overflow:hidden assurez-vous que le contect ne saignent pas à d'autres cellules. vous pouvez également ajouter white-space: nowrap si vous souhaitez conserver la hauteur d'augmenter.

InformationsquelleAutor Sammy
0

Cela peut être fait par la mise en tableau-style de cellule à width: auto, et le contenu vide. Les colonnes sont maintenant égaux, mais sur la tenue de l'absence de contenu.

Pour insérer le contenu de la cellule, ajouter un div avec css:
```
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
```
Vous devez également ajouter position: relative pour les cellules.

Maintenant vous pouvez mettre le contenu dans le div parlé ci-dessus.

https://jsfiddle.net/vensdvvb/

InformationsquelleAutor RnMss

Vous devez vous connecter pour publier un commentaire.