※※【レイアウト雛形】テーブルクラス※※
テーブル・デフォルト
テーブルヘッダ | テーブルセル |
---|---|
テーブルヘッダ | テーブルセル |
テーブルヘッダ | テーブルセル |
テーブル・ヘッダ背景色#f2f2f2
テーブルヘッダ | テーブルセル |
---|---|
テーブルヘッダ | テーブルセル |
テーブルヘッダ | テーブルセル |
テテーブル・ボーダーあり
テーブルヘッダ | テーブルヘッダ | テーブルヘッダ | テーブルヘッダ |
---|---|---|---|
テーブルヘッダ | テーブルセル | テーブルセル | テーブルセル |
テーブルヘッダ | テーブルセル | テーブルセル | テーブルセル |
テーブル・ボーダーありヘッダ背景色#f2f2f2
テーブルヘッダ | テーブルヘッダ | テーブルヘッダ | テーブルヘッダ |
---|---|---|---|
テーブルヘッダ | テーブルセル | テーブルセル | テーブルセル |
テーブルヘッダ | テーブルセル | テーブルセル | テーブルセル |
テーブル・スモール
テーブルヘッダ | テーブルセル |
---|---|
テーブルヘッダ | テーブルセル |
テーブルヘッダ | テーブルセル |
テーブル・セル幅 20:80
w-xxはパーセンテージ10,20,30,40,50,60,70,80,90,100※スマホにも対応させる場合は「md」を削除して使用する
w-md-xxはパーセンテージ10,20,30,40,50,60,70,80,90,100
class=”w-20″ | class=”w-80″ |
---|---|
テーブルヘッダ | テーブルセル |
テーブルヘッダ | テーブルセル |
テーブル・セル幅 50:50
w-md-xxはパーセンテージ10,20,30,40,50,60,70,80,90,100
class=”w-50″ | class=”w-50″ |
---|---|
テーブルヘッダ | テーブルセル |
テーブルヘッダ | テーブルセル |
テーブルをレスポンシブ対応(オバーフローした際に横スクロール)にする場合は、
<table></table>
を
<div class="table-responsive"></div>
で囲んでください。
*横スクロール無しにしたい場合は削除