bootstrapはレスポンシブなウェブサイトを作るのにとても便利なcssのフレームワークです。
Bootstrapのサイト
今回は、管理画面に使う入力フォームをレスポンシブ対応で作成したのですが、table要素とform要素を組み合わせた時に表示が崩れてしまったので、失敗したコードと、修正してうまくいったコードを書き残します。
bootstrapの使用で、table要素に.tableクラスを与え、さらに.table-responsiveクラスのdiv要素等で囲んであげると、レスポンシブ対応のテーブル要素になります。
さらに入力フォームなのですが、tableタグをformタグと一緒に組み合わせるところで躓きました。
失敗した時のコード
See the Pen form wrapped table bad sample by kai (@depoton) on CodePen.0
表示が直ったコード
See the Pen form wrapped table sample by kai (@depoton) on CodePen.0
単純なことだったのですが、tableタグ全体をformタグで囲むと表示が崩れてしまったので、tableタグの内側にformタグを記述するようにしたらうまくいきました!
参考リンク:
http://getbootstrap.com/css/#tables-responsive
http://getbootstrap.com/css/#forms