CSS

Bootstrapで用意されているCSSの説明。

テーブル

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

基本のテーブルスタイル

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>