HTMLのテーブルを画面サイズに合わせる方法

HTML CSS

HTMLのテーブルを画面サイズに合わせる方法

HTMLテーブルを画面サイズに合わせる方法について説明します。
画面サイズに応じてテーブルの幅を調整することで、どのデバイスでも適切に表示されるようにすることが可能です。
以下に、基本的な方法をいくつか紹介します。

方法1: テーブルの幅を100%に設定する

テーブル全体の幅を100%に設定することで、親要素の幅に合わせてテーブルが伸縮します。
この方法は特にレスポンシブデザインで有効です。

HTMLファイル (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Table</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table id="test-table">
    <caption>Sample Table</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
CSSファイル (styles.css)
#test-table {
  width: 100%;
  border-collapse: collapse;
}

#test-table th, #test-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}

この例では、テーブルが親要素の幅に合わせて伸縮します。
親要素がウィンドウ全体の幅である場合、テーブルもウィンドウ全体に広がります。

方法2: テーブルにスクロール機能を追加する

画面幅が狭い場合でもテーブルを崩れさせずに表示するには、テーブル全体をスクロール可能にする方法もあります。
この方法では、テーブルの幅が画面幅を超えた場合にスクロールバーが表示されます。

HTMLファイル (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollable Table</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="test-table-container">
    <table id="test-table">
      <caption>Sample Table</caption>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Cell 1</td>
          <td>Row 1, Cell 2</td>
          <td>Row 1, Cell 3</td>
        </tr>
        <tr>
          <td>Row 2, Cell 1</td>
          <td>Row 2, Cell 2</td>
          <td>Row 2, Cell 3</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>
CSSファイル (styles.css)
#test-table-container {
  width: 100%;
  overflow-x: auto;
}

#test-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

#test-table th, #test-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}

この例では、test-table-containerというdivでテーブルを包み、その中にスクロール機能を追加しています。
min-widthを設定することで、テーブルの最低幅を指定し、それを超えるとスクロールバーが表示されるようになります。

方法3: メディアクエリを使ったレスポンシブデザイン

画面サイズに応じてテーブルのデザインを変更するために、メディアクエリを使用します。
例えば、小さな画面ではテーブルを縦に積み重ねる形式にすることが可能です。

HTMLファイル (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Table with Media Queries</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table id="test-table">
    <caption>Sample Table</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
CSSファイル (styles.css)
#test-table {
  width: 100%;
  border-collapse: collapse;
}

#test-table th, #test-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}

@media (max-width: 600px) {
  #test-table, #test-table thead, #test-table tbody, #test-table th, #test-table td, #test-table tr {
    display: block;
    width: 100%;
  }

  #test-table thead tr {
    display: none;
  }

  #test-table td {
    display: flex;
    justify-content: space-between;
    border: none;
    border-bottom: 1px solid #000;
  }

  #test-table td::before {
    content: attr(data-label);
    font-weight: bold;
  }
}

この例では、メディアクエリを使って画面幅が600px以下の場合、テーブルを縦に積み重ねて表示するようにします。
td要素にdata-label属性を追加し、これを::before疑似要素で表示することで、モバイル表示時でもデータの対応関係がわかりやすくなります。

これらの方法を組み合わせることで、さまざまなデバイスに対応した柔軟なテーブルデザインを実現できます。