bootstrap_thumb

Bootstrap

Bootstrapの表(テーブル)の使い方7選

2016/12/01

Bootstrapでのテーブル作成する際のメモを忘備録としてポストします。

Bootstrapで表・Tableを作る方法

デモ

1. 基本

class を "table" とすれば Bootstrap 仕様となる。
thead、tbodyタグは省略できないらしい。

bootstrap_table_01

2. ストライプ

"table-striped" クラスで薄いグレーでストライプになる。
色がつくのは、tbody タグの一番最初から、とのこと。

bootstrap_table_02

3. ボーダー(縦線)を付ける

"table-bordered" クラスで薄いグレーの縦ボーダーが入る。

bootstrap_table_03

4. マウスオーバーで背景色

"table-hover" クラスで、マウスオーバーした時にセルに背景色が付く。

bootstrap_table_04

5. padding を半分にする

"table-condensed" クラスで、セルにかかっている padding 値が半分になる。

bootstrap_table_05

6. セルに既定の背景色をつける

セルに任意の色を付ける。
<tr> タグにつけると、その列全て、 <td> タグはそのセルだけとなる。

各クラス名は以下となる。

.default
なし
.active
マウスオーバーした時と同様の色
.success
うすい緑
.info
うすい青
.warning
うすい黄色
.danger
うすい赤

bootstrap_table_06

7. レスポンシブ仕様

ブラウザ横幅が 768px より小さくなった場合、"table-responsive" クラスの div 等で括ったテーブルにスクロールバーを表示させる。

bootstrap_table_07

デモ

-Bootstrap
-, , , ,