Bootstrap3
日本語リファレンス

広告

セル内の余白を半分に  Condensed table


table要素のclass属性にtable-condensedを追加すると、セル内の余白を半分にし、表をコンパクトにする。


サンプル
順位 名前 惑星 勝点
1 ブルーSC 地球 101
2 FCウェヌス 金星 83
3 ジュピターFC 木星 68
4 SCマーキュリー 水星 67
5 FCマルス 火星 65
ソースコード
<table class="table table-condensed">
	<thead>
		<tr>
			<th>順位</th>
			<th>名前</th>
			<th>惑星</th>
			<th>勝点</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1</th>
			<td>ブルーSC</td>
			<td>地球</td>
			<td>101</td>
		</tr>
		<tr>
			<th>2</th>
			<td>FCウェヌス</td>
			<td>金星</td>
			<td>83</td>
		</tr>
		<tr>
			<th>3</th>
			<td>ジュピターFC</td>
			<td>木星</td>
			<td>68</td>
		</tr>
		<tr>
			<th>4</th>
			<td>SCマーキュリー</td>
			<td>水星</td>
			<td>67</td>
		</tr>
		<tr>
			<th>5</th>
			<td>FCマルス</td>
			<td>火星</td>
			<td>65</td>
		</tr>
	</tbody>
</table>

広告