web-dev-qa-db-ja.com

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>
htmlcsscss-tables
55
UntitledGraphic

「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

また、テーブルセルを正しく表示するにはvertical-align:top;が必要になる場合が多いことに注意してください。

css table-cell、コンテンツには不要な上部マージンがあります

1
cssyphus