Edited at

Bootstrapでテーブルを利用する方法

More than 1 year has passed since last update.

テーブル.png


基本的な記述方法

table_basic.png


  • 基本的にはhtmlのtableを作成する記述と同じ

  • 大枠のtableタグにクラスで"table"を指定


qiita.rb

<table class="table">

<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Hanako</td>
<td>Qiita</td>
<td>@Hanaq</td>
</tr>
<tr>
<th>2</th>
<td>Taro</td>
<td>Qiita</td>
<td>@TaroQ</td>
</tr>
</tbody>
</table>


オプション

様々なクラスを付与することで、見た目・機能の装飾ができる


デザイン


ストライプ

table_stripe.png


  • 偶数行の行だけ背景を灰色にする

  • "table-striped"のクラスを付与


qiita.rb

<table class="table table-striped">

<!-- 基本記述と同じ -->
</table>


ボーダー

table_border.png


  • テーブルの枠組みに線をつける

  • "table-bordered"のクラスを付与


qiita.rb

<table class="table table-bordered">

<!-- 基本記述と同じ -->
</table>


マウスオーバー

table_hover.png


  • テーブルにマウスオーバーした際に行全体の背景を灰色に変更する

  • "table-hover"のクラスを付与


qiita.rb

<table class="table table-hover">

<!-- 基本記述と同じ -->
</table>


行幅の短縮

table_condense.png


  • テーブルの行の幅を狭める

  • "table-condensed"のクラスを付与


qiita.rb

<table class="table table-condensed">

<!-- 基本記述と同じ -->
</table>


背景色

table_background.png


  • テーブルの行やセルに背景色を適用

  • 背景色として適用したいクラスを付与


使用クラス

灰色
active


success


info

黄色
danger


warning


qiita.rb

<table class="table">

<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<!-- 行全体を灰色に -->
<tr class="active">
<th>1</th>
<td>Hanako</td>
<td>Qiita</td>
<td>@Hanaq</td>
</tr>
<tr>
<!-- 各セル毎に背景色を変更 -->
<th class="success">2</th>
<td class="info">Taro</td>
<td class="danger">Qiita</td>
<td class="warning">@TaroQ</td>
</tr>
</tbody>
</table>


レスポンシブ

table_responsive.png


  • テーブルの幅は固定で横幅が足りなくなった場合に、横スクロールさせる

  • tableタグを"table-responsive"で包む


qiita.rb

<div class="table-responsive">

  <table class="table table-condensed">
  <!-- 基本記述と同じ -->
  </table>
</div>


参考