CSSの【display table編】プロパティでよく使うものをあつめてみた。(第二回)

table

さて、今回はこちら【display:table;】です
ここでは【display:table;】とそれに付随する【display:table-cell;】などもあわせて一挙にご紹介します。

前回での流れ通り、この値を与えると強制的にtable要素のようにかわります。
tableとその中のcellをdivなどを使ってつくるのですが、その前にtableの利点を考えてみましょう。
ほぼtableで組まないと出来ないこと、まずはフレキシブルな枠組みですね。
たとえばfloatで3カラムをつくった場合、高さはそれぞれのカラムで違ってしまいますが、tableであれば一番長いカラムに合わせて3カラムが均等な高さにそろいます。
それに、borderの繋ぎ目が簡単ですね。floatだと:first-childやclassをつかってborderが重ならない様にしなければいけませんが、tableだとその手間がありません。
それでは、floatとtableの違いを見てみましょう

例

HTML

      <h4 class="testTit">floatの場合</h4>
      <div class="reiBox clearfix">
        <div class="inBox"><h5 class="tit">カラムその１</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox"><h5 class="tit">カラムその２</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox last"><h5 class="tit">カラムその３</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
      </div>
      <h4 class="testTit">tableの場合</h4>
      <table class="reiTbl">
        <tbody>
          <tr>
            <td><h5 class="tit">カラムその１</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
            <td><h5 class="tit">カラムその２</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
            <td><h5 class="tit">カラムその３</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
          </tr>
        </tbody>
      </table>
    

CSS

      <style>
        .testTit {
          text-align:center;
        }
        .reiBox {
          max-width: 600px;
          margin:0 auto;
        }
        .reiBox .inBox {
          float:left;
          max-width:196px;
          border:solid #B06715;
          border-width: 2px 0 2px 2px;
        }
        .reiBox .inBox.last {
          border:2px solid #B06715;
        }
        .reiTbl {
          max-width:600px;
          margin:0 auto;
          border-collapse:collapse;
        }
        .reiTbl td {
          max-width:196px;
          border:2px solid #B06715;
          vertical-align:top;
        }
      </style>
    

floatの場合

tableの場合

tableの利点としてもう一つ、上下の中央揃えが容易にできるようになります。
vertical-align:middle;がtableのcellに内包されるインライン要素に適応されるからですね。
たとえば、見出しの頭に大きなアイコン画像を置いた状態や、他の見出し文が改行されたときも上下中央基準にしたいときは、vertical-alignを使いたいです。でも、通常のブロック要素には適応されません。
特性として、インライン要素とテーブルセルにしか適応されないからです。
しかし、このdisplayプロパティを使うことで、通常のブロック要素でも容易に出来るようになります。(*´ω｀*)ﾍﾞﾝﾘ

ですが、ここで注意点
display:table;は【IE7以下は対応していません】
近年、IE7への対応が減っていきいるとはいえ、まだまだ現役なIE7以下のIEシリーズちゃん達。。。
対応ブラウザがIE8以上で良いのであればじゃんじゃん使ってよいとおもいます。

では、先ほどのfloatで作った3カラムをそのままtableレイアウトにしてみましょう

inline-table

次はinline-tableです。
その名の通り、文章の文節と同じよう行内での扱いとなるtable要素が生成されます。
display:inline-block;のtable版ですね。

それでは少し例を作ってみます。

例

HTML

      <div class="reiBox05">
        あいうえお
        <table class="reiTbl03">
          <tr>
            <td>か</td>
            <td>き</td>
          </tr>
          <tr>
            <td>く</td>
            <td>け</td>
          </tr>
          <tr>
            <td colspan="2">こ</td>
          </tr>
        </table>
        さしすせそ
      </div>
      <div class="reiBox05_2">
        ほかにも<p class="txt">
        <span class="frame">こ<br>ん</span>
        <span class="frame">な<br>こ</span>
        <span class="frame">と<br>も</span>
        <span class="frame">で<br>き</span>
        <span class="frame">ま<br>す</span></p>
      </div>
    

CSS

      <style>
        .reiBox05 {
        }
        .reiBox05 .reiTbl03 {
          display:inline-table;
          max-width:100px;
          border-collapse:collapse;
        }
        .reiBox05 .reiTbl03 td{
          border:1px solid #B06715;
          text-align:center;
        }
        .reiBox05_2 {
        }
        .reiBox05_2 .txt {
          display:inline-table;
          border-collapse:separate;
          border-spacing:15px;
        }
        .reiBox05_2 .txt .frame {
          display:table-cell;
          padding:2px;
          border:1px solid #B06715;
          font-weight:bold;
        }
      </style>
    

使い方はその都度の案件のケースに合わせてですが、inlineとしてtableを扱うことができる。
という程度の認識で良いと思います。

table-header-groupその他

ここまでするケースはまず無いのですが、tableを使わずにtableとほぼ同じ挙動のものを作ることが出来ます。
しかし、colspanなどが使用できないので、実用性はないです。 なのでこのへんは、知識としてちょっと知っておくくらいで良いと思います。

値表

使うであろうものはこのくらいです。
それではdivを使ってモデルをつくってみます。
こちらのソースを参照していただくと、なんとなく構造のつくりがわかると思います。
theadやtbodyってなんだっけ？というかたはtableの基本をもう一度見なおしてみましょう。

HTML

      <div class="reiBox06">
        <div class="caption">キャプションです</div>
        <div class="thead">
          <div class="headerBox">
            <h4 class="tit">タイトル01</h4>
            <h4 class="tit">タイトル02</h4>
            <h4 class="tit">タイトル03</h4>
            <h4 class="tit">タイトル04</h4>
            <h4 class="tit">タイトル05</h4>
          </div>
        </div><!-- / .thead -->
        <div class="tbody">
          <div class="txtBox">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
          <div class="txtBox">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
          <div class="txtBox">
            <p class="txt">テキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキスト</p>
          </div>
        </div><!-- / .tbody -->
        <div class="tfoot">
          <div class="footerBox"><p class="txt"></p><p class="txt"></p><p class="txt">フッターになります</p><p class="txt"></p><p class="txt"></p></div>
        </div>
      </div>
    

CSS

      <style>
        .reiBox06 {
          display: table;
          border-collapse: collapse;
          max-width: 680px;
          margin: 0 auto;
        }
        
        .reiBox06 .caption {
          display: table-caption;
          padding: 6px 0;
          text-align: center;
          font-size: 18px;
          font-weight: bold;
        }
        
        .reiBox06 .thead {
          display:table-header-group;
        }
  
        .reiBox06 .thead .headerBox {
          display:table-row;
        }
        
        .reiBox06 .thead .headerBox .tit {
          display: table-cell;
          padding: 6px 0;
          border: 1px solid #B06715;
          text-align: center;
        }
        
        .reiBox06 .tbody {
          display:table-row-group;
        }
        
        .reiBox06 .tbody .txtBox {
          display:table-row;
        }
        
        .reiBox06 .tbody .txtBox .txt {
          display:table-cell;
          padding: 8px;
          border:1px solid #B06715;
        }
        
        .reiBox06 .tfoot {
          display:table-footer-group;
        }
        
        .reiBox06 .tfoot .footerBox {
          display:table-row;
          border:1px solid #B06715;
  
        }
        
        .reiBox06 .tfoot .footerBox .txt {
          display:table-cell;
          padding: 6px 0;
        }
      </style>
    

と言った感じで、tableもどきが作れます。
結合が出来ない（やり方あったら教えて下さい。）ので、実用で使う場面でいうとレスポンシブの時、もともと文章だったものを表にしたり、その逆をしたりといったケースのときでしょうか。
そうそう無いですが、知っているといざというときにさっと対応出来て良いと思います(´・ω・｀)ｂ

これでこのシリーズは終わりです。
おもったより、ボリューミーになりましたが、読んでくださった方に感謝です。
それでは、良きコーディングライフを(´・ω・｀)ﾉｼ

第一回はこちら