[Bootstrap] tableのまとめ
Bootstrapで使える、テーブルのスタイルをまとめました。
使えそうなものを書いていきます。
table
普通のテーブル
普通のテーブルだと、CSSを設定してないと、このように
| あああ | いいい | ううう |
|---|
| かかかかか | ききききき | くくくくく |
| さささささ | ししししし | すすすすす |
レイアウトが崩れてしまいます。
Bootstrapを使うと
| あああ | いいい | ううう |
|---|
| かかかかか | ききききき | くくくくく |
| さささささ | ししししし | すすすすす |
このように、CSS無しで、きれいにテーブルを作成できます。
Bootstrap
テーブルに書かれている文字を、classに指定することで、見本のようなテーブルを作成できます。
tableのclass
ストライプ
| table-striped | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
枠線
| table-bordered | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
マウスオーバー
| table-hover | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
色反転
| table-dark | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
theadのclass
見出しの色
| thead-light |
いいい |
ううう |
| thead-dark |
いいい |
ううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
tbodyのclass
見出しの色
| thead-light | いいいいい | ううううう |
|---|
| thead-light | いいいいい | ううううう |
|---|
| thead-dark | いいいいい | ううううう |
|---|
| thead-dark | いいいいい | ううううう |
|---|
| あああああ | いいいいい | ううううう |
| あああああ | いいいいい | ううううう |
trのclass
背景色
| table-primary | いいいいい | ううううう |
| table-secondary | いいいいい | ううううう |
| table-success | いいいいい | ううううう |
| table-info | いいいいい | ううううう |
| table-warning | いいいいい | ううううう |
| table-danger | いいいいい | ううううう |
| table-light | いいいいい | ううううう |
| table-dark | いいいいい | ううううう |
tdのclass
背景色
| table-primary | いいいいい | ううううう |
| table-secondary | いいいいい | ううううう |
| table-success | いいいいい | ううううう |
| table-info | いいいいい | ううううう |
| table-warning | いいいいい | ううううう |
| table-danger | いいいいい | ううううう |
| table-light | いいいいい | ううううう |
| table-dark | いいいいい | ううううう |
