Bootstrapのテーブルは、以下ルール内で使用しましょう。
ルール1:class="container"の中に
ルール2:table要素に対してclass="table"を記載
- <div class="container">
- <table class="table">
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Larry</td>
- <td>the Bird</td>
- <td>@twitter</td>
- </tr>
- </tbody>
- </table>
- </div>
table要素のclassに対して「table-striped」を追加すると、1行間隔で背景色を変えることができます。
- <div class="container">
- <table class="table table-striped">
- ……
table要素のclassに対して「table-bordered」を追加すると、テーブルに枠線を追加できます。
- <div class="container">
- <table class="table table-striped table-bordered">
- ……
table要素のclassに対して「table-hover」を追加すると、テーブルにマウスオーバーしたときのエフェクトを追加できます。
- <div class="container">
- <table class="table table-striped table-bordered table-hover ">
- ……
table要素のclassに対して「table-condensed」を追加すると、テーブルのpadding値を通常の半分にすることができます。
- <div class="container">
- <table class="table table-striped table-bordered table-hover table-condensed">
- ……
tr要素/td要素のclassに対して「active」「success」「warning」「danger」「info」のいずれかを指定すると、それぞれの値に対応した背景色にすることができます。
- <div class="container">
- <table class="table table-striped table-bordered table-hover table-condensed">
- <thead>
- <tr class="active">
- ……
- <tr class="success">
- ……
- <tr class="warning">
- ……
- <tr class="danger">
- ……
- <tr class="info">
- ……
「div class="container"」要素とtable要素の間に「div class="table-responsive"」要素を追加すると、テーブルをレスポンシブ対応できます。具体的に言うと、ブラウザーウィンドウを狭くすると、table要素内にスクロールバーが出現します。
- <div class="container">
- <div class="table-responsive">
- <table class="table table-striped table-bordered table-hover table-condensed">
- ……
Copyright © ITmedia, Inc. All Rights Reserved.
HTML5�ス�ス�ス�ス�ス�ス�ス�ス鬮ッ蜿・�ケ�「�ス�ス�ス�スX 鬯ッ�ョ�ス�ォ�ス�ス�ス�ェ鬮ッ蛹コ�サ繧托スス�ソ�ス�ス�ス�ス�ス�ス�ス�ス�ス�コ鬮」蛹�スス�オ髫エ竏オ�コ�キ�ス�ク�ス�キ�ス�ス�ス�ケ髫エ雜」�ス�「�ス�ス�ス�ス�ス�ス�ス�ウ鬯ゥ蟷「�ス�「�ス�ス�ス�ァ�ス�ス�ス�ス�ス�ス�ス�ュ鬯ゥ蟷「�ス�「髫エ雜」�ス�「�ス�ス�ス�ス�ス�ス�ス�ウ鬯ゥ蟷「�ス�「�ス�ス�ス�ァ�ス�ス�ス�ス�ス�ス�ス�ー