最新のWeb開発のチュートリアル
 

Bootstrap CSSテーブルリファレンス


<table>のクラス

任意のテーブルのスタイルを設定するには、以下のクラスを使用します。

クラス 説明
.table いずれにも基本的なスタイリング(光パディングとだけ水平デバイダ)を追加します<table> それを試してみてください
.table-striped 内の任意のテーブル行にゼブラストライプを追加します<tbody> (IE8では使用できません) それを試してみてください
.table-bordered テーブルとセルのすべての側面に境界線を追加します。 それを試してみてください
.table-hover 内のテーブルの行にホバー状態を有効にします<tbody> それを試してみてください
.table-condensed 半分にセルパディングを切断することにより、テーブルよりコンパクトになります それを試してみてください
すべてのテーブルクラスを組み合わせます それを試してみてください

<tr>, <th>および<td>クラス

カラーテーブルの行またはセルに以下のクラスを使用します。

クラス 説明
.active 特定の行またはセルにホバー色を適用します それを試してみてください
.success 成功または積極的な行動を示しています それを試してみてください
.info 中立有益な変更またはアクションを示します それを試してみてください
.warning 注意が必要な場合があります警告を示し それを試してみてください
.danger 危険または潜在的に負の作用を示します それを試してみてください

レスポンシブ表

.table応答クラスは、応答テーブルを作成します。 テーブルには、その後、小型デバイス(768px下)に水平方向にスクロールします。 ワイド768pxより大きい何にも表示しているときに、違いはありません。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
»それを自分で試してみてください