HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

ブートストラップテーブル

❮ 前 次 ❯

ブートストラップ基本テーブル

基本的なブートストラップテーブルには、軽いパディングと水平方向の仕切りのみがあります。

この.tableクラスは、テーブルに基本的なスタイルを追加します。

例

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

縞模様の列

この.table-stripedクラスは、テーブルにゼブラストライプを追加します。

例

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

ボーダーテーブル

.table-borderedクラスは、テーブルとセルのすべての側に境界線を追加します。

例

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

行をホバーします

この.table-hoverクラスは、テーブルの行にホバー効果（灰色の背景色）を追加します。

例

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

凝縮されたテーブル

この.table-condensedクラスは、セルのパディングを半​​分にカットすることで、テーブルをよりコンパクトにします。

例

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

コンテキストクラス

コンテキストクラスを使用して、テーブルの行（<tr>）またはテーブルのセル（<td>）に色を付けることができます。

例

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

使用できるコンテキストクラスは次のとおりです。

クラス 説明
.active 表の行または表のセルにホバーカラーを適用します
.success 成功または前向きな行動を示します
.info 中立的な有益な変更またはアクションを示します
.warning 注意が必要な可能性のある警告を示します
.danger 危険または潜在的に否定的な行動を示します

レスポンシブテーブル

.table-responsiveクラスはレスポンシブテーブルを作成します。その後、テーブルは小さなデバイス（768px未満）で水平方向にスクロールします。幅768ピクセルを超えるものを表示する場合、違いはありません。

例

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

エクササイズで自分をテストする

エクササイズ：

クラス属性を追加して、テーブルを基本的なブートストラップテーブルとしてスタイル設定します。

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

完全なブートストラップテーブルリファレンス

すべてのテーブルクラスの完全なリファレンスについては、完全な Bootstrap TablesReferenceにアクセスしてください。


❮ 前 次 ❯