JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Bootstrapのtable-stripedクラスでテーブルに縞模様（ストライプ）を実装する方法

Bootstrapのtable-stripedクラスとは

Bootstrapには、テーブルの行に交互の縞模様（ストライプ）を自動的に付けることができる table-striped クラスが用意されています。table クラスと組み合わせて指定するだけで、奇数行と偶数行の背景色が自動的に切り替わり、大量のデータを扱う表でも視認性が大きく向上します。

以下は、Bootstrap 4で table-striped クラスを実装したサンプルコードです。

実装例（サンプルコード）

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap テーブル</title>
      <meta name ="viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <table class = "table table-striped">
         <caption>サッカー選手ランキング</caption>
         <thead>
            <tr>
               <th>サッカー選手</th>
               <th>順位</th>
               <th>国</th>
            </tr>
         </thead>
      </table>
   </body>
</html>

ポイント：2つのクラスを同時に指定する

上記のコードのように、<table> タグに対して「table」と「table-striped」の2つのクラスを同時に指定するのがポイントです。これにより、Bootstrapの基本テーブルスタイルに加えて、ストライプ模様が自動的に適用されます。

あわせて使いたい関連クラス

table-striped は他のテーブル用クラスと組み合わせることで、さらに見やすい表を作成できます。

  • table-hover … マウスカーソルを乗せた行の背景色が変わります
  • table-bordered … 全セルに罫線を引きます
  • table-dark … ダークテーマのテーブルになります（table-dark table-striped のように組み合わせると、暗色ベースのストライプ表現も可能です）

このように、Bootstrapのユーティリティクラスを活用すれば、CSSを一から書くことなく、洗練されたデザインのテーブルを短時間で実装できます。ぜひプロジェクトで活用してみてください。

  1. C#のConsoleクラスとは？主要プロパティの使い方を実例付きで解説

    C#のConsoleクラスは、コンソールアプリケーションにおける標準入力・標準出力・標準エラー出力の各ストリームを表すクラスです。テキストの表示や入力の読み取りだけでなく、文字色や背景色の変更、カーソル位置やサイズの制御など、コンソール操作に関するさまざまな機能が提供されています。ここでは、Consoleクラスの代表的なプロパティの使い方を、サンプルコードと実行結果とあわせて解説します。Console.CursorLeftプロパティコンソール上のカーソル位置（左端から数えた列位置）を変更するには、Console.CursorLeftプロパティを使用します。サンプルコードusing System

  2. C#のタプル（Tuple）クラスとは？複数の値を扱う方法を解説

    C#では、メソッドから複数の値を返したい場合にタプル（Tuple）が便利です。タプルは異なる型の複数のデータ要素をひとつのオブジェクトとしてまとめて扱えるデータ構造で、.NET 4.0から導入されました。タプルを作成するには、Tupleクラスが提供する静的なコンストラクタやCreateメソッドを使用します。各要素には、Item1、Item2といったプロパティを通じてアクセスできます。タプルの基本的な使い方以下は、int型とstring型の2つの要素を持つタプルを作成し、その値を参照する例です。using System; public class Demo { public stati