bootstrapでtableとformを組み合わせてレスポンシブ表示するときの注意

bootstrapでtableとformを組み合わせてレスポンシブ表示するときの注意

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

Pocket
このエントリーをはてなブックマークに追加