web-dev-qa-db-fra.com

La cellule de tableau d'affichage CSS nécessite un pourcentage de largeur

On m'a mis dans une position où je dois utiliser la commande display: table-cell pour les éléments div.

Cependant, j'ai découvert que les "cellules" ne fonctionneraient correctement que si un pourcentage était ajouté à la largeur.

Dans ce violon http://jsfiddle.net/NvTdw/ lorsque je supprime la largeur en pourcentage, les cellules n'ont pas la même largeur. Toutefois, lorsqu'une valeur en pourcentage est ajoutée à la largeur, tout va bien, mais seulement lorsque ce pourcentage est égal à la proportion de max no de divs, ainsi pour quatre colonnes 25%, cinq 20% et dans ce cas cinq à 16,666%.

Je pensais que peut-être ajouter un pourcentage de moins - disons que 1% serait une bonne solution à tous, mais les cellules tombent de nouveau en ligne.

Pourquoi est-ce?

    .table {
      display: table;
      height: 200px;
      width: 100%;
    }

    .cell {
      display: table-cell;
      height: 100%;
      padding: 10px;
      width: 16.666%;
    }

    .grey {
      background-color: #666;
      height: 100%;
      text-align: center;
      font-size: 48px;
      color: #fff;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 300;
    }
<div class="table">
  <div class="cell">
    <div class="grey">Block one</div>
  </div>
  <div class="cell">
    <div class="grey">Block two</div>
  </div>
  <div class="cell">
    <div class="grey">Block three</div>
  </div>
</div>
<div class="table">
  <div class="cell">
    <div class="grey">Block</div>
  </div>
  <div class="cell">
    <div class="grey">Block two</div>
  </div>
</div>
<div class="table">
  <div class="cell">
    <div class="grey">Block one</div>
  </div>
  <div class="cell">
    <div class="grey">Block two</div>
  </div>
  <div class="cell">
    <div class="grey">Block three</div>
  </div>
  <div class="cell">
    <div class="grey">Block four</div>
  </div>
</div>
<div class="table">
  <div class="cell">
    <div class="grey">x</div>
  </div>
  <div class="cell">
    <div class="grey">xx</div>
  </div>
  <div class="cell">
    <div class="grey">xxx</div>
  </div>
  <div class="cell">
    <div class="grey">xxxx</div>
  </div>
  <div class="cell">
    <div class="grey">xxxxxx</div>
  </div>
  <div class="cell">
    <div class="grey">Block five test</div>
  </div>
</div>
<div class="table">
  <div class="cell">
    <div class="grey">Block</div>
  </div>
  <div class="cell">
    <div class="grey">Block two</div>
  </div>
  <div class="cell">
    <div class="grey">Block three</div>
  </div>
</div>
htmlcsscss-tables
55
UntitledGraphic

Vous devez juste ajouter 'table-layout: fixed;'

.table {
   display: table;
   height: 100px;
   width: 100%;
   table-layout: fixed;
}

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

104
André Junges

Notez également que vertical-align:top; est souvent nécessaire pour un aspect correct des cellules de la table.

css table-cell, le contenu a une marge supérieure inutile

1
cssyphus