テーブル

用意されたクラスを指定することでテーブルの見た目を変更できます。

基本のテーブルスタイル

tableタグにクラス.tableを指定すると外枠なしborderが入ったシンプルなテーブル表示になります。

	姓	名	ユーザ名
1	佐藤	太郎	satou
2	鈴木	凛	rin_suzu
3	高橋	かおり	sakura

				<table class="table">
					...
				</table>

レスポンシブテーブル

.tableを指定したtableを.table-responsiveで囲むとレスポンシブテーブルになります。スマホサイズ（767px）以下になると横にスクロールするテーブルになります。画面の小さなスマホなどでは情報が多いと縦に長く見づらいテーブルになるのでそんな時に利用すると良いかもしれません。
PC閲覧の方はブラウザのサイズを変更して確認してみてください。

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

				<div class="table-responsive">
					<table class="table">
					...
					</table>
				</div>

様々なテーブルの設定

上記以外にも用意さている様々なテーブルの設定を紹介していきます。

行のストライプ表示

クラス.table-stripedを.tableと一緒に指定することで行の背景がストライプで表示されます。

	姓	名	ユーザ名
1	佐藤	太郎	satou
2	鈴木	凛	rin_suzu
3	高橋	かおり	sakura

				<table class="table table-striped">
					...
				</div>

境界線のあるテーブル

クラス.table-borderedを.tableと一緒に指定することで基本と違い外枠とセルの縦にもボーダーが入ります。

	姓	名	ユーザ名
1	佐藤	太郎	satou
2	鈴木	凛	rin_suzu
3	高橋	かおり	sakura

				<table class="table table-bordered">
					...
				</div>

hoverテーブル

クラス.table-hoverを.tableと一緒に指定するとマウスをテーブルに乗せるとマウスのある行の背景に色がつきます。

	姓	名	ユーザ名
1	佐藤	太郎	satou
2	鈴木	凛	rin_suzu
3	高橋	かおり	sakura

				<table class="table table-hover">
					...
				</div>

縦の狭いテーブル

クラス.table-condensedを.tableと一緒に指定するとセルの縦の余白設定が半分のテーブルになります。

	姓	名	ユーザ名
1	佐藤	太郎	satou
2	鈴木	凛	rin_suzu
3	高橋	かおり	sakura

				<table class="table table-condensed">
					...
				</div>

テーブルの行やセルの背景色

テーブルのtrやtdにクラスを指定することで背景色をつけることができます。用意されているクラスは.active、.success、.info、.warning、.dangerの5種類です。

	姓	名	ユーザ名
1	佐藤	太郎	satou
2	鈴木	凛	rin_suzu
3	高橋	かおり	sakura

各クラスの対応色は下記の通りです。

.active

.success

.info

.warning

.danger

					<!-- 行 -->
					<tr class="active">...</tr>
					<tr class="success">...</tr>
					<tr class="warning">...</tr>
					<tr class="danger">...</tr>
					<tr class="info">...</tr>

					<!--セル (td or th) -->
					<tr>
						<td class="active">...</td>
						<td class="success">...</td>
						<td class="warning">...</td>
						<td class="danger">...</td>
						<td class="info">...</td>
					</tr>