BootstrapのTableの使い方

BootstrapのTable関連を少し試してみたいと思います。

Basic example

tableタグに.tableを追加することで、スタイルを追加します。

HTML

<table class="table">
	<caption>アイドルマスターシンデレラガールズ</caption>
	<thead>
		<tr>
			<th>No</th>
			<th>Name</th>
			<th>Age</th>
			<th>Birthday</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>01</th>
			<td>島村卯月</td>
			<td>17</td>
			<td>4/24</td>
		</tr>
		<tr>
			<th>02</th>
			<td>渋谷 凛</td>
			<td>15</td>
			<td>8/10</td>
		</tr>
		<tr>
			<th>03</th>
			<td>本田未央</td>
			<td>15</td>
			<td>12/1</td>
		</tr>
	</tbody>
</table>

Basicのデモページ
　

Striped rows

tableタグに.table-stripedを追加することで、tbodyタグ内の行の背景をストライプにします。
:nth-childを使用しているので、IE8では対応していないようです。

HTML

<table class="table table-striped">
～略～
</table>

Striped rowsのデモページ
　

Bordered table

tableタグに.table-borderedを追加することで、tableの周囲にborderを追加します。

HTML

<table class="table table-bordered">
～略～
</table>

Bordered tableのデモページ
　

Hover rows

tableタグに.table-hoverを追加することで、tbodyの行をホバーした時に背景色をつけます。

HTML

<table class="table table-hover">
～略～
</table>

Hover rowsのデモページ
　

Condensed table

tableタグに.table-condensedを追加することで、table内の余白を半分に縮小します。

HTML

<table class="table table-condensed">
～略～
</table>

Condensed tableのデモページ
　

Contextual classes

行またはセルに個別の背景色をつける場合は、trまたはth、tdタグに下記クラスを追加します。

HTML

<table class="table">
	<caption>アイドルマスターシンデレラガールズ</caption>
	<thead>
		<tr>
			<th>No</th>
			<th>Name</th>
			<th>Age</th>
			<th>Birthday</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>01</th>
			<td>島村卯月</td>
			<td>17</td>
			<td>4/24</td>
		</tr>
		<tr class="active">
			<th>02</th>
			<td>渋谷 凛</td>
			<td>15</td>
			<td>8/10</td>
		</tr>
		<tr class="success">
			<th>03</th>
			<td>本田未央</td>
			<td>15</td>
			<td>12/1</td>
		</tr>
		<tr class="info">
			<th>04</th>
			<td>赤城みりあ</td>
			<td>11</td>
			<td>4/14/</td>
		</tr>
		<tr class="warning">
			<th>05</th>
			<td>アナスタシア</td>
			<td>15</td>
			<td>9/19/</td>
		</tr>
		<tr class="danger">
			<th>06</th>
			<td>双葉 杏</td>
			<td>17</td>
			<td>9/2</td>
		</tr>
		<tr>
			<th class="active">07</th>
			<td class="success">前川みく</td>
			<td class="info">15</td>
			<td>2/22</td>
		</tr>
		<tr>
			<th class="warning">08</th>
			<td class="danger">三村かな子</td>
			<td>17</td>
			<td>1/6</td>
		</tr>
	</tbody>
</table>

Contextual classesのデモページ
　

Responsive tables

.tableをdiv.table-responsiveで括ることで、画面サイズが小さい場合に対応(横スクロールの表示)します。
画面サイズ768px以下で、tableの内容量が画面幅で収まらない場合にスクロール表示されます。

HTML

<div class="table-responsive">
	<table class="table">
		<caption>アイドルマスターシンデレラガールズ</caption>
		<thead>
			<tr>
				<th>No</th>
				<th>Name</th>
				<th>Age</th>
				<th>Birthday</th>
				<th>Blood type</th>
				<th>Height</th>
				<th>Birthplace</th>
				<th>Hobby</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>01</th>
				<td>島村卯月</td>
				<td>17</td>
				<td>4/24</td>
				<td>O型</td>
				<td>159cm</td>
				<td>東京</td>
				<td>友達と長電話</td>
			</tr>
			<tr>
				<th>02</th>
				<td>渋谷 凛</td>
				<td>15</td>
				<td>8/10</td>
				<td>B型</td>
				<td>165cm</td>
				<td>東京</td>
				<td>犬の散歩</td>
			</tr>
			<tr>
				<th>03</th>
				<td>本田未央</td>
				<td>15</td>
				<td>12/1</td>
				<td>B型</td>
				<td>161cm</td>
				<td>千葉</td>
				<td>ショッピング</td>
			</tr>
		</tbody>
	</table>
</div>

Responsive tablesのデモページ
　

【参考サイト】

• CSS · Bootstrap