• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2015/04/14
書いた人:
yanoppa!
カテゴリ:
CSS
98,066 views

CSSの【display:table;】とそれに付随する【display:table-cell;】などもあわせて一挙にご紹介します。

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





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

前回の続きでございます。(´・ω・`)v

今回は前回でやり残した、tableやinline-table関係を掘り下げてみます。

flexなど掘り下げた第一回はこちら
おなじく目次でページ移動しますのでお気をつけください。

では順番に見て行きましょう!

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">カラムその1</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox"><h5 class="tit">カラムその2</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox last"><h5 class="tit">カラムその3</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
      </div>
      <h4 class="testTit">tableの場合</h4>
      <table class="reiTbl">
        <tbody>
          <tr>
            <td><h5 class="tit">カラムその1</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
            <td><h5 class="tit">カラムその2</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
            <td><h5 class="tit">カラムその3</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の場合

カラムその1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

tableの場合

カラムその1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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

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

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

float組だったモデルをdisplay:table;とdisplay:table-cell;でtable化してみます

HTML

    <div class="reiBox02 clearfix">
        <div class="inBox"><h5 class="tit">カラムその1</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox"><h5 class="tit">カラムその2</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox last"><h5 class="tit">カラムその3</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
    </div>
  




CSS

    <style>
        .reiBox02 {
          display:table;
          max-width: 600px;
          margin:0 auto;
          border-collapse:collapse;/* 重複するborderを合体させます */
        }
        .reiBox02 .inBox {
          display:table-cell;
          max-width:196px;
          border:2px solid #B06715;
        }
    </style>
  




カラムその1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

このように、tableレイアウトと同じ様になります。
なので、ここにvertical-align:middle;をいれると全体が上下中央揃えになります。

HTML

    <div class="reiBox02 clearfix">
        <div class="inBox middle"><h5 class="tit">カラムその1</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox middle"><h5 class="tit">カラムその2</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox middle last"><h5 class="tit">カラムその3</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
    </div>
  




CSS

    <style>
        .reiBox02 .inBox.middle {
          vertical-align:middle;
        }
    </style>
  




カラムその1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

上下中央揃えになりましたね。しかし、下記ようなtableレイアウトも再現することはできますがわざわざする必要がないので、この場合はtableで組むほうがいいと思います。

HTML

    <table class="reiTbl02">
      <tr>
        <th>カラムその1</th>
        <th>カラムその2</th>
        <th>カラムその3</th>
      </tr>
      <tr>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      </tr>
    </table>
  




CSS

    <style>
      .reiTbl02 {
          max-width:600px;
          margin:0 auto;
          border-collapse:collapse;
      }
      .reiTbl02 tr th {
          max-width:196px;
          border:2px solid #B06715;
          vertical-align:middle;
          text-align:center;
      }
      .reiTbl02 tr td {
          border:2px solid #B06715;
          vertical-align:top;
      }
    </style>
  




カラムその1 カラムその2 カラムその3
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

display:table;で簡易再現

HTML

      <div class="reiBox03">
      	<div class="reiBox03_1">
      	  <h5 class="tit">カラムその1</h5>
      	  <h5 class="tit">カラムその2</h5>
      	  <h5 class="tit">カラムその3</h5>
      	</div>
      	<div class="reiBox03_2">
      	  <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      	  <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      	  <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      	</div>
      </div>
    




CSS

      <style>
        .reiBox03 {
          display: table;
          max-width: 600px;
          margin: 0 auto;
          border-collapse: collapse;
        }
        .reiBox03_1 {
          display: table-row; /* いわゆるtrです */
        }
        .reiBox03_1 .tit {
          display: table-cell;
          width: 33.33%;
          border: 2px solid #B06715;
          vertical-align: middle;
          text-align: center;
        }
        .reiBox03_2 {
          display: table-row; /* いわゆるtrです */
        }
        .reiBox03_2 .txt {
          display: table-cell;
          width: 33.33%;
          border: 2px solid #B06715;
        }
      </style>
    




カラムその1
カラムその2
カラムその3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

このように、trに該当するボックスを使わなければならないなど、とても面倒になります。
このような場合はtableで組むほうがいいですね!

話は戻りまして、このdisplay:table;をつかって出来る有効な使用例をご紹介します。
先に言いましたが、見出しなどで高さが変わっても上下中央揃えにしたい場合などはとても有効です。

見出しなどで使える使用例

HTML

      <div class="reiBox04 clearfix">
        <div class="inBox"><p class="titImg">アイコン</p><h5 class="tit">見出し01</h5></div>
      </div>
      <div class="reiBox04 clearfix">
        <div class="inBox"><p class="titImg02">アイコン</p><h5 class="tit">見出しその2</h5></div>
      </div>
      <div class="reiBox04 clearfix">
        <div class="inBox"><p class="titImg">アイコン</p><h5 class="tit">見出しその3<br>見出しその3見出しその3<br>見出しその3見出しその3見出しその3</h5></div>
      </div>
    




CSS

      <style>
        .reiBox04 {
          margin-bottom:10px;
        }
        .reiBox04 .inBox {
          display:table;
          vertical-align:middle;
        }
        .reiBox04 .inBox .titImg {
          display:table-cell;
          max-width:50px;
          height:50px;
          background:#C1FFE9;
          vertical-align: middle;
          text-align:center;
          font-size:12px;
        }
        .reiBox04 .inBox .titImg02 {
          display:table-cell;
          max-width:100px;
          height:100px;
          background:#C1FFE9;
          vertical-align: middle;
          text-align:center;
          font-size:12px;
        }
        .reiBox04 .inBox .tit {
          display:table-cell;
          padding-left:10px;
          vertical-align: middle;
          font-size:16px;
        }
      </style>
    




アイコン

見出し01

アイコン

見出しその2

アイコン

見出しその3
見出しその3見出しその3
見出しその3見出しその3見出しその3

見出し02はアイコンが大きくなった場合、見出し03は見出し文が改行されて縦に伸びた場合を想定しています。
アイコンの文字が画像の場合同じように中央にいきます。

あまりなさそうで結構あるケースですので、覚えておくと役に立ちます!(´・ω・`)b
注意点は、親要素にdisplay:table;を入れ、子要素にdisplay:table-cell;のみを設定した場合、table:cell;は全て横並びになってしまうことです。
テーブルでいうとtrがひとつしか無い状態になるので、その仕組さえわかれば大丈夫とおもいます。
グループ分けはこの後ご説明いたします。

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などが使用できないので、実用性はないです。 なのでこのへんは、知識としてちょっと知っておくくらいで良いと思います。

値表

table table要素と同じ挙動に変更する
table-caption caption要素と同じ挙動に変更する
table-header-group thead要素と同じ挙動に変更する
table-row-group tbody要素と同じ挙動に変更する
table-footer-group tfoot要素と同じ挙動に変更する
table-row tr要素と同じ挙動に変更する
table-cell th要素、td要素と同じ挙動に変更する

使うであろうものはこのくらいです。
それでは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>
    




キャプションです

タイトル01

タイトル02

タイトル03

タイトル04

タイトル05

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

フッターになります

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

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

第一回はこちら


この記事を読んだ人はこんな記事も読んでいます