css display table cell требуется процентная ширина

Question

Я был помещен в позицию, где мне нужно использовать команду table-cell для элементов div.

Однако я обнаружил, что «ячейки» будут работать только правильно, если процент добавляется к ширине.

В этой скрипте http://jsfiddle.net/NvTdw/, когда я удаляю процентную ширину, ячейки не имеют одинаковой ширины, однако когда процентное значение добавляется к ширине, все хорошо, но только тогда, когда этот процент равен доле max divs, так что для четырех столбцов 25%, пять 20% и в этом случае пять на 16.666%.

Я думал, возможно, добавив процент меньше - скажем, 1% будет хорошим решением, но клетки снова выпадают из строя.

Почему это?

.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

Вам просто нужно добавить 'таблицу-макет: фиксированный;'

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

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

Answer 2

Следует также отметить, что vertical-align:top; часто необходимо для корректного отображения ячейки таблицы.

css table-cell, contents have unnecessary top margin