web-dev-qa-db-fra.com

CSS largeur de cellule de table égale

J'ai un nombre indéterminé d'éléments de cellules de table dans 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 purement CSS d’obtenir une largeur égale des cellules de tableau même si leur contenu est de taille différente?

Merci.

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

htmlcsshtml-table
137
Harry

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

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

L'astuce consiste à utiliser table-layout: fixed; et une largeur sur chaque cellule pour la déclencher, ici 2%. Cela déclenchera la other table algorightm, celle dans laquelle les navigateurs s'efforceront de respecter les dimensions indiquées.
Veuillez tester avec Chrome (et IE8- si nécessaire). C'est correct 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;_ faux (ou peut-être tout à fait différent, très différent des autres navigateurs. Je n'ai pas relu CSS2.1 Disposition de la table REC;)). Soyez prêt à des résultats différents.

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

DEMO.

24
The Alpha

Le simple fait d'utiliser max-width: 0 dans l'élément display: table-cell 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>
13
José Antonio Postigo

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>

Examinez tous les problèmes liés à l’utilisation des divs comme des tableaux. Ils ont dû ajouter table-xxx pour imiter les dispositions de table

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 sous forme de tableaux ou quelque chose qui ressemble à des tableaux de données sous forme de tableaux, tout fonctionne.

Réponse très tardive je sais mais mérite d'être exprimée.

5
DeveloperChris

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.

1
tcasante1

Voici:

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

Vous ne pouvez pas utiliser width: 100px, car l'affichage est un tableau. Vous pouvez cependant utiliser Max-width: 100px. alors votre boîte ne deviendra jamais plus grande que 100px. mais vous devez ajouter overflow: hidden pour vous assurer que le contenu 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
Sammy

Pour ce faire, définissez le style de cellule de tableau sur width: auto et le contenu est vide. Les colonnes ont maintenant la même largeur mais ne contiennent aucun contenu.

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

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

Vous devez également ajouter position: relative aux cellules.

Maintenant, vous pouvez mettre le contenu actuel dans la division mentionnée ci-dessus.

https://jsfiddle.net/vensdvvb/

0
RnMss