Bootstrapでテーブル表記を行う|コピペで動くサンプル付き

htmlのフレームワークBootstrapでテーブルを組む際に便利なクラスがあるので、解説します。

テーブル表記のサンプルコード

下記コードをメモ帳などに貼り付け、html形式で保存し展開すれば内容を確認できます。

<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>タイトル</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

  <div  class="container">
   <table class="table ">
     <thead>
       <tr class="success">
         <th>ユーザーＩＤ</th>
         <th>姓</th>
         <th>名</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th>1</th>
         <td>田中</td>
         <td>太郎</td>
       </tr>
       <tr>
         <th>2</th>
         <td>山田</td>
         <td>花子</td>
       </tr>
     </tbody>
   </table>
 </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

テーブルに枠を設定する

CSSにtable-borderedを設定すると枠組みに線を設定できます

<table class="table table-bordered">
    <!-- 基本構文と同じ -->
</table>

table-bordered

テーブルの偶数行の背景を灰色にする

CSSにtable-stripedを設定すると偶数行を灰色に設定できます

<table class="table table-striped">
    <!-- 基本構文と同じ -->
</table>

table-striped

テーブル行の幅を狭める

CSSにtable-condensedを設定すると行間を狭める事ができます

<table class="table condensed">
    <!-- 基本構文と同じ -->
</table>

table-condensed

テーブルの行をhoverしたら背景を灰色にする

CSSにtable-hoverを設定するとhoverした行を灰色に設定できます

<table class="table table-hover">
    <!-- 基本構文と同じ -->
</table>

table-hover

画面を狭めるとテーブルの内容を横スクロールさせる

tableの上位要素にtable-responsiveを付与してtable要素を囲むと画面を狭めた際にテーブルの内容を横スクロールさせることができます

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

以上

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

Bootstrapでコンテンツを強調する|コピペで動くサンプル付き

あなたにお勧めの記事

2018/03/08

Ruby on Railsのパーシャルとnew_record？メソッドを利用しフォームを簡素化する

2018/02/25

Ruby on Rails でページネーションを設定する