Bootstrap によるレスポンシブ Web デザイン

表を配置する

表を作成するときには class="table" を追加するだけで Bootstrap の美しいデザインを採用できます．

index.html（抜粋）<table class="table">
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

クラスに .table-striped を追加すると，行ごとにストライプを入れることができます．

index.html（抜粋）<table class="table table-striped">
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

クラスに .table-hover を追加すると，PCでマウスをポイントした行がハイライトされるようになります．ただし，この機能はスマートフォンやタブレットでは効果が得られないことにも注意してください．

index.html（抜粋）<table class="table table-striped table-hover">
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

やはりここで例示した以外にも Bootstrap では様々な表のデザインを作成できます．詳細はこちらを参照してください．

目次に戻る