display: table; の使い方

使い方

横に並べたい要素にdisplay: table-cell;を指定し、その要素を囲む親要素にdisplay: table;を指定する。
display: table;はHTMLのtable要素を指定したテーブルレイアウトをやっていることは同じ。それをCSSだけで実現できる。
高さを揃えた横並びのレイアウトや、縦方向への中央揃えが簡単にできるようになる。

例

<div class="parent">
  <div class="child">aaa</div>
  <div class="child">bbb</div>
  <div class="child">ccc</div>
</div>

.parent {
  display: table;
  width: 100%;
  border: 2px solid red;
  margin-top: 10px;
}
.child {
  display: table-cell;
  border: 1px solid blue;
}

display: table; を指定したした要素はそのままだとこ要素分しか広がらないので、画面横幅いっぱいに広げるためにwidth: 100%;を指定している。

• width: 100%; を指定しなかった場合
  

display: table-cell; で指定した子要素どうしに間隔をあけたい場合

子要素にmarginを指定するのでなく、親要素にborder-collapse: separate;,border-spacing:プロパティを指定する。

例

.parent {
  display: table;
  width: 100%;
  border: 2px solid red;
  margin-top: 10px;
  border-collapse: separate;
  border-spacing: 10px 5px;
}

複数行にしたい場合

<div class="skill-wrapper">
          <div class="table-row">
            <div class="skill-box">
              <img src="" alt="">
              <h3 class="skill-title">HTML</h3>
              <p class="skill-text">テキストテキストテキストテキストテキストテキスト</p>
            </div>
            <div class="skill-box">
              <img src="" alt="">
              <h3 class="skill-title">CSS</h3>
              <p class="skill-text">テキストテキストテキストテキストテキストテキスト</p>
            </div>
            <div class="skill-box">
              <img src="" alt="">
              <h3 class="skill-title">Ruby</h3>
              <p class="skill-text">テキストテキストテキストテキストテキストテキスト</p>
            </div>
          </div>
          <div class="table-row">
            <div class="skill-box">
              <img src="" alt="">
              <h3 class="skill-title">Git</h3>
              <p class="skill-text">テキストテキストテキストテキストテキストテキスト</p>
            </div>
            <div class="skill-box">
              <img src="" alt="">
              <h3 class="skill-title">jQuery</h3>
              <p class="skill-text">テキストテキストテキストテキストテキストテキスト</p>
            </div>
            <div class="skill-box">
              <img src="" alt="">
              <h3 class="skill-title">XML</h3>
              <p class="skill-text">テキストテキストテキストテキストテキストテキスト</p>
            </div>
          </div>
        </div>

.skill-wrapper {
  display: table;
  width: 100%;
  table-layout:fixed;
}
.table-row {
  display:table-row;
}
.skill-wrapper .skill-box {
  display: table-cell;
}