twitter-bootstrap
テーブル

備考

基本テーブル

ブートストラップは、 .tableクラスを使用してテーブルのカスタムスタイリングを定義します。 .tableクラスを任意の<table>に追加するだけで、水平ディバイダとパディングを見ることができます：

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

高度なスタイリングを備えたテーブル

ブートストラップは、高度なテーブルスタイリングのための2つのクラスを提供します。

ストライプ行

.table-stripedクラスを追加すると、行がストライプ化された表が表示されます。

<table class="table table-striped">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

ご了承ください：

ストライプ化された表のスタイルは、Internet Explorer 8では使用できない:nth-child CSSセレクターによって行います。

ボーダーテーブル

.table-borderedクラスを追加すると、表とセルのすべての面に罫線のある表が表示されます。

<table class="table table-bordered">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

行にカーソルを合わせる

.table-hoverクラスを追加すると、ユーザーが行を移動したときにハイライト表示された表が表示されます。

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

凝縮テーブル

.table-condensedクラスを追加すると、デフォルトのセルのパディングが半分にカットされるため、よりコンパクトな表が作成されます。

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

コンテクストクラス

ブートストラップテーブルはコンテキストカラーをサポートします。テーブルの行やセルの背景色を変更するには、次の対話的なクラス（ .active 、 .success 、 .info 、 .warning 、 .dangerいずれかを追加するだけ.danger

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr class="success"><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td class="info">Bloggs</td></tr>
  </tbody>
</table>

レスポンステーブル

応答可能なテーブルを作成するには、 .table-responsiveクラスを持つHTMLコンテナ内の任意の.tableをラップする.tableがあります。

<div class="table-responsive">
  <table class="table">
    <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
    <tbody>
      <tr><td>John</td><td>Doe</td></tr>
      <tr><td>Fred</td><td>Bloggs</td></tr>
    </tbody>
  </table>
</div>

レスポンステーブルは小さなデバイス（<768px）で水平にスクロールします。画面サイズが768pxより大きい場合には違いはありません。

テーブルリフロー - 垂直ヘッダー

垂直ヘッダーを持つテーブルを取得する。

Twitterのブートストラップは、整形済みの通常の表の垂直ヘッダーをサポートするようになりました。これを実現するには、 .table-reflowクラスを使用するだけです

.table-reflowテーブルでは、twitterのブートストラップの.table-reflowクラスを使用して、垂直ヘッダーを含むテーブルを作成します。さらに、 .table-hover 、 .table-hover .table-stripedと.table-hover .table-stripedを組み合わせて、カラム上でのホバリングを行うことができます。

<table class="table table-striped table-hover table-reflow">
    <thead>
        <tr>
            <th ><strong> First Name: </strong></th>
            <th ><strong> Last Name: </strong></th>
            <th ><strong> Email: </strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> John </td>
            <td> Doe </td>
            <td> [email protected] </td>
        </tr>
        <tr>
            <td> Joane </td>
            <td> Donald </td>
            <td> [email protected] </td>
        </tr>
    </tbody>
</table>

ここでv4のアルファドキュメントをチェックしてください： twitter-bootstrap .table-reflow