2018-03-11
2019-10-09
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>ユーザーID</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>
テーブルの偶数行の背景を灰色にする
CSSにtable-stripedを設定すると偶数行を灰色に設定できます
<table class="table table-striped"> <!-- 基本構文と同じ --> </table>
テーブル行の幅を狭める
CSSにtable-condensedを設定すると行間を狭める事ができます
<table class="table condensed"> <!-- 基本構文と同じ --> </table>
テーブルの行をhoverしたら背景を灰色にする
CSSにtable-hoverを設定するとhoverした行を灰色に設定できます
<table class="table table-hover"> <!-- 基本構文と同じ --> </table>
画面を狭めるとテーブルの内容を横スクロールさせる
tableの上位要素にtable-responsiveを付与してtable要素を囲むと 画面を狭めた際にテーブルの内容を横スクロールさせることができます
<div class="table-responsive"> <table class="table table-condensed"> <!-- 基本記述と同じ --> </table> </div>
以上
その他の関連記事
サイトへ簡単にアイコンを無料設定できる|Font Awesomeの使い方|サンプルコード付き
Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き
Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き
Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き
Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き
Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き
あなたにお勧めの記事
前の記事
次の記事
2018/02/25