column - td width html

css display table cell requiere porcentaje de ancho

Question

Me pusieron en una posición en la que necesito usar la pantalla: comando de celda de tabla para elementos div.

Sin embargo, he descubierto que las "celdas" solo funcionarán correctamente si se agrega un porcentaje al ancho.

En este violín http://jsfiddle.net/NvTdw/ cuando http://jsfiddle.net/NvTdw/ el ancho porcentual, las celdas no tienen el mismo ancho, sin embargo, cuando se agrega un valor porcentual al ancho, todo está bien, pero solo cuando ese porcentaje es igual al proporción de no máximo de divs, entonces para cuatro columnas 25%, cinco 20% y en este caso cinco a 16.666%.

Pensé que agregar un porcentaje de menos, digamos un 1%, sería una buena solución, pero las células vuelven a caer fuera de línea.

¿Por qué es esto?

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

Answer 1

Solo necesita agregar ''table-layout: fixed;''

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

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

Answer 2

Tenga en cuenta también que vertical-align:top; a menudo es necesario para la apariencia correcta de la celda de la mesa.

css table-cell, los contenidos tienen margen superior innecesario