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

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

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

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

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

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

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

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

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

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

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

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

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

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

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