knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

テーブルのセルをカラム落ちさせる

レスポンシブ案件などで、あえて表組を崩して、th,tdを横幅いっぱいに広げたい(1カラムのレイアウトにしたい)ときがあります。
今回は下図のような事例を想定します。

f:id:ShinImae:20151211112946j:plain

見出しのセルをth, フォーム部品を持っているセルをtdでマークアップしています。

クリアすべきなのは次の2点。

  1. カラム落ちさせ、2カラムを1カラムへ変更
  2. th, tdを親要素の横幅いっぱいに広げる

これらを同時に充足する方法として、ブロック要素の性質を利用して display:block を指定すればよいと思われますが、残念ながらIE9だけ表示が崩れてしまいます。

f:id:ShinImae:20151211113030j:plain

カラム落ちしない上に、tdの幅が極端に縮んでしまいます。

そんなときはfloatとclearを同時に指定すると、意図したレイアウトになります。

th, td {
    display:block;
   float:left;
    clear:both;
    width: 100%;
}

※display: table-row-groupを使う方法もありますが、やはりIE9では挙動が不安定なのでお勧めはしません。

 

こうすることで、横並びになっているセルがカラム落ちされます。

しかし下図をご覧になってお分かりのとおり、幅が不足しています。

f:id:ShinImae:20151211114033j:plain

そこで、table,tbody,trにも次のスタイルを指定しておきます。

table, tbody, tr {
    display: block;
    width: 100%;
}

こうすることで、意図したレイアウトになりました。

f:id:ShinImae:20151211114923j:plain