CSS 표시 테이블 셀에는 백분율 너비가 필요합니다.

CSS 표시 테이블 셀에는 백분율 너비가 필요합니다.

---

div 요소에 display : table-cell 명령을 사용해야하는 위치에 배치되었습니다.

그러나 너비에 백분율이 추가 된 경우에만 "셀"이 올바르게 작동 함을 발견했습니다.

이 바이올린에서 http://jsfiddle.net/NvTdw/ 백분율 너비를 제거하면 셀의 너비가 같지 않지만 너비에 백분율 값이 추가되면 모두 잘되지만 해당 백분율이 최대 div 수의 비율이므로 4 개 열의 경우 25 %, 5 개 20 %,이 경우 5 개는 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>

---

'table-layout : fixed;'만 추가하면됩니다.

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

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

---

Note also that vertical-align:top; is often necessary for correct table cell appearance.

css table-cell, contents have unnecessary top margin

ReferenceURL : https://stackoverflow.com/questions/19834620/css-display-table-cell-requires-percentage-width