Bootstrapは、テーブルを作成するための明確なレイアウトを提供します。次の表には、ブートストラップでサポートされているいくつかのテーブル要素を示します。
テーブルカテゴリ
次のテーブルスタイルは、テーブルで使用できます。
<tr>、<th>、<td>クラス
次のテーブルクラスは、テーブルの行またはセルに使用できます。
基本テーブル
パディングと水平方向の分割のみを備えた基本テーブルが必要な場合は、次の例に示すようにクラス.tableを追加します。
<div> <table> <キャプション>基本的なテーブルレイアウト</caption> <thead> <tr> <th> city </th> <th> city </th> </tr> </thead> <tbody> <tr> <td> no.1 </td> <td> beijing </td> </tr <td> </td> </td> </td> </td> </td> </td> </tbody> </table> </div>
表示効果：
オプションのテーブルクラス
基本的なテーブルタグと.tableクラスに加えて、タグのスタイルを定義するために使用できるクラスがいくつかあります。これらのクラスは以下に紹介されます。
ストライプテーブル
.tableストライプクラスを追加すると、次の例に示すように、<tbody>内部の線にストライプが表示されます。
<div> <table> <caption>ストライプテーブルレイアウト</caption> <thead> <tr> <th> city </th> <th> city </th> </tr> </thead> <tbody> <tr> <td> no.1 </td> <td> beijing </td> </td> <tr> <td> no.3 </td> <td> suzhou </td> </tr> <tr> <td> no.4 </td> <td> nanjing </td> </tr> </tbody> </table> </div>
表示効果：
境界テーブル
.table-borderedクラスを追加することにより、次の例に示すように、各要素がその周りに境界があり、テーブル全体が丸くなっていることがわかります。
<div> <table> <caption>ボーダーテーブルレイアウト</caption> <thead> <tr> <th> city </th> <th> city </th> </tr> </thead> <tbody> <tr> <td> no.1 </td> <td> beijing </td> </tr <td * no.2 </td> </td> </td> </td> </td> <tr> <td> no.3 </td> <td> suzhou </td> </tr> <tr> <td> no.4 </td> <td> nanjing </td> </tr> </tbody> </table> </div>
表示効果：
ホバーテーブル
.table-Hoverクラスを追加することにより、次の例に示すように、ポインターがライン上にホールすると明るい灰色の背景が表示されます。
<div> <table> <キャプション> Hoomテーブルレイアウト</caption> <thead> <tr> <th> city </th> <th> city </th> </tr> </thead> <tbody> <tr> <td> no.1 </td> <td> beijing </td> </td> <tr> <td> no.3 </td> <td> suzhou </td> </tr> <tr> <td> no.4 </td> <td> nanjing </td> </tr> </tbody> </table> </div>
表示効果：
簡素化されたフォーム
.tableコンデンスクラスを追加することにより、下の例に示すように、テーブルをよりコンパクトに見せるために、パディングを半分にカットします。これは、情報をよりコンパクトに見せようとする場合に非常に便利です。
<div> <table> <caption>単純化されたテーブルレイアウト</caption> <thead> <tr> <th> city </th> <th> city </th> </tr> </thead> <tbody> <tr> <td> no.1 </td> <td> beijing </td> </td> <tr> <td> no.3 </td> <td> suzhou </td> </tr> <tr> <td> no.4 </td> <td> nanjing </td> </tr> </tbody> </table> </div>
表示効果：
コンテキストクラス
次の表にリストされているコンテキストクラスでは、テーブルの行または単一のセルの背景色を変更できます。
これらのクラスは、次の例に示すように、<tr>、<td>、および<th>で使用できます。
<div> <table> <caption>コンテキストテーブルレイアウト</caption> <thead> <tr> <th> city </th> <th> city </th> </tr> </thead> <tbody> <tr> <td> no.1 </td> <td> beijing </td> </tr <td> </td> </td> </td> </td> </td> </td> </td> <tr> <td> no.3 </td> <td> suzhou </td> </tr> <tr> <td> no.4 </td> <td> nanjing </td> </tr> </tbody> </table> </div>
表示効果：
レスポンシブテーブル
.table応答クラスで任意の.tableをラップすることにより、小さなデバイスに合わせてテーブルを水平にスクロールすることができます（768px未満）。幅768pxを超える大きなデバイスで表示すると、違いは見られません。
<div> <table> <caption>レスポンシブテーブルレイアウト</caption> <thead> <tr> <th> city </th> <th> city </th> </tr> </thead> <tbody> <tr> <td> no.1 </td> <td> beijing </td> </td> <tr> <td> no.3 </td> <td> suzhou </td> </tr> <tr> <td> no.4 </td> <td> nanjing </td> </tr> </tbody> </table> </div>
表示効果：
学習を続けたい場合は、ここをクリックして勉強してから素晴らしいトピックを添付してください：Bootstrap Learningチュートリアル
上記はこの記事に関するすべてです。 JSテーブルコンポーネントアーティファクトブートストラップテーブルをよりよく学ぶのに役立つことを願っています。