「Bootstrap.cssのTables」のサンプル

「Bootstrap.cssのクラス名のサンプル：和訳」の「Tables」のサンプルページです。

• table幅は100%なので、tebleの中身によっては予定していた幅を超えることもある。

基本

「table.table」にする

<table class="table">
	<thead>
		<tr><th>#</th><th>姓</th><th>名</th></tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>マーク</td><td>オット</td></tr>
		<tr><td>2</td><td>ヤコブ</td><td>トロントン</td></tr>
		<tr><td>3</td><td>ラリー</td><td>バード</td></tr>
	</tbody>
</table>

1行ずつ色違い

「table」タグのclass属性の値を「table table-striped」にする

<table class="table table-striped">
	<thead>
		<tr><th>#</th><th>姓</th><th>名</th></tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>マーク</td><td>オット</td></tr>
		<tr><td>2</td><td>ヤコブ</td><td>トロントン</td></tr>
		<tr><td>3</td><td>ラリー</td><td>バード</td></tr>
	</tbody>
</table>

縦線あり

「table」タグのclass属性の値を「table table-bordered」にする

<table class="table table-bordered">
	<thead>
		<tr><th>#</th><th>姓</th><th>名</th></tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>マーク</td><td>オット</td></tr>
		<tr><td>2</td><td>ヤコブ</td><td>トロントン</td></tr>
		<tr><td>3</td><td>ラリー</td><td>バード</td></tr>
	</tbody>
</table>

マウスを乗せた行をハイライト

「table」タグのclass属性の値を「table table-hover」にする

<table class="table table-hover">
	<thead>
		<tr><th>#</th><th>姓</th><th>名</th></tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>マーク</td><td>オット</td></tr>
		<tr><td>2</td><td>ヤコブ</td><td>トロントン</td></tr>
		<tr><td>3</td><td>ラリー</td><td>バード</td></tr>
	</tbody>
</table>

paddingが少なめ

「table」タグのclass属性の値を「table table-condensed」にする

<table class="table table-condensed">
	<thead>
		<tr><th>#</th><th>姓</th><th>名</th></tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>マーク</td><td>オット</td></tr>
		<tr><td>2</td><td>ヤコブ</td><td>トロントン</td></tr>
		<tr><td>3</td><td>ラリー</td><td>バード</td></tr>
	</tbody>
</table>

背景色に色をつける

「tr」「th」「td」に色のクラス（active、success、warning、danger、info）を指定

<table class="table">
	<caption>trタグに背景色のクラス設定</caption>
	<thead>
		<tr><th>#</th><th>クラス名</th><th>色</th></tr>
	</thead>
	<tbody>
		<tr class="active"><td>1</td><td>active</td><td>グレー</td></tr>
		<tr class="success"><td>2</td><td>success</td><td>緑</td></tr>
		<tr class="warning"><td>3</td><td>warning</td><td>黄（クリーム色）</td></tr>
		<tr class="danger"><td>4</td><td>danger</td><td>赤</td></tr>
		<tr class="info"><td>5</td><td>info</td><td>青（水色）</td></tr>
	</tbody>
</table>

<table class="table">
	<caption>th、tdタグに背景色のクラス設定</caption>
	<thead>
		<tr><th>#</th><th>クラス名</th><th>色</th></tr>
	</thead>
	<tbody>
		<tr><th class="active">1</th><td>active</td><td class="active">グレー</td></tr>
		<tr><th class="success">2</th><td>success</td><td class="success">緑</td></tr>
		<tr><th class="warning">3</th><td>warning</td><td class="warning">黄（クリーム色）</td></tr>
		<tr><th class="danger">4</th><td>danger</td><td class="danger">赤</td></tr>
		<tr><th class="info">5</th><td>info</td><td class="info">青（水色）</td></tr>
	</tbody>
</table>

レスポンシブ

ウィンドウ幅を縮小したときにウィンドウ幅を超える場合、横スクロール表示。

「table」タグの親を「.table-responsive」でくくる

<div class="table-responsive">
	<table class="table">
		<thead>
			<tr><th>#</th><th>姓</th><th>名</th><th>column: ０</th><th>column: １</th><th>column: ２</th><th>column: ３</th><th>column: ４</th><th>column: ５</th></tr>
		</thead>
		<tbody>
			<tr><td>1</td><td>マーク</td><td>オット</td><td>value: ０</td><td>value: １</td><td>value: ２</td><td>value: ３</td><td>value: ４</td><td>value: ５</td></tr>
			<tr><td>2</td><td>ヤコブ</td><td>トロントン</td><td>value: ０</td><td>value: １</td><td>value: ２</td><td>value: ３</td><td>value: ４</td><td>value: ５</td></tr>
			<tr><td>3</td><td>ラリー</td><td>バード</td><td>value: ０</td><td>value: １</td><td>value: ２</td><td>value: ３</td><td>value: ４</td><td>value: ５</td></tr>
		</tbody>
	</table>
</div>

関連ページ

• Bootstrap
• CSS
• Html/cssのサンプル
• Bootstrap.cssのクラス名のサンプル：和訳