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

CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

CSSでレスポンシブ対応のテーブルを作成するには、テーブル全体を<div>要素で囲み、その親要素に overflow-x: auto; を指定するのが最もシンプルで確実な方法です。これにより、画面幅が狭い環境（スマートフォンやタブレットなど）でも、テーブルが横にはみ出すことなく、水平スクロールバーが自動的に表示されるようになります。

レスポンシブテーブルのポイント

レスポンシブテーブルを実現するうえで重要なCSSプロパティは以下のとおりです。

  • overflow-x: auto; … コンテナからはみ出した内容に対して、必要な場合のみ横スクロールバーを表示します。
  • width: 100%; … テーブルをコンテナ幅に合わせて拡張します。
  • border-collapse: collapse; … セル同士の境界線を重ねて、すっきりとした見た目にします。
  • padding … セル内に余白を持たせ、可読性を高めます。

それでは、実際のコード例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    div{
        overflow-x: auto;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid rgb(0, 0, 0);
    }
    th, td {
        text-align: left;
        padding: 8px;
    }
    tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<h1>Responsive Table Example</h1>
<div>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
</tr>
<tr>
<td>JACK</td>
<td>ROY</td>
<td>50</td>
<td>60</td>
<td>10</td>
<td>20</td>
<td>40</td>
<td>50</td>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>
<tr>
<td>Evelyn</td>
<td>Monroe</td>
<td>24</td>
<td>14</td>
<td>22</td>
<td>44</td>
<td>55</td>
<td>44</td>
<td>11</td>
<td>55</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>Joe</td>
<td>Anderson</td>
<td>54</td>
<td>22</td>
<td>99</td>
<td>55</td>
<td>91</td>
<td>61</td>
<td>81</td>
<td>11</td>
<td>22</td>
<td>55</td>
</tr>
</table>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

ウィンドウの幅を狭めてリサイズすると、以下のようにテーブルの下に水平スクロールバーが表示され、横方向にスクロールできるようになります。

CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

補足：より快適なスクロール体験のために

モバイル端末ではスクロールバーが常に表示されないため、ユーザーがテーブルをスクロールできることに気づきにくい場合があります。そのようなときは、コンテナの右端にグラデーションを追加したり、「→ スクロールできます」などの案内テキストを添えると、ユーザビリティが向上します。また、-webkit-overflow-scrolling: touch; を併用すると、iOSデバイスでの慣性スクロールが滑らかになります。

  1. CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法

    Webサイトに掲載する「お客様の声（テスティモニアル）」は、信頼性を高めるための重要な要素です。CSSを活用すれば、デスクトップでもスマートフォンでも見やすい、レスポンシブなデザインを簡単に実現できます。 この記事では、メディアクエリとfloatを使って、画面幅に応じてレイアウトが自動的に切り替わるテスティモニアルカードの作り方を解説します。 実装のポイント 基本レイアウト： プロフィール画像を float: left; で左に回り込みさせ、名前とコメントを右側に配置します。 円形画像： border-radius: 50%; を指定することで、画像を丸く表示できます。 float の解除：

  2. CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】

    CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <