印刷時にテーブルヘッダーを繰り返す方法

2024-04-08

印刷モードでテーブルヘッダーを繰り返す：CSSとCSSテーブル

このチュートリアルでは、CSSとCSSテーブルを使用して、印刷モードでテーブルヘッダーを繰り返す方法を説明します。

方法

以下の2つの方法があります。

thead 要素の display プロパティを table-header-group に設定する

この方法は、HTMLとCSSの変更が最小限で済みます。

HTML

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>東京都渋谷区</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>大阪府大阪市</td>
    </tr>
  </tbody>
</table>

CSS

thead {
  display: table-header-group;
}

@media print ルールを使用する

この方法は、より柔軟な制御が可能です。

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>東京都渋谷区</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>大阪府大阪市</td>
    </tr>
  </tbody>
</table>

@media print {
  thead {
    display: table-header-group;
  }
}

補足

上記のコードは基本的な例です。必要に応じて変更してください。
ブラウザによっては、上記の方法がうまく動作しない場合があります。

注意

このチュートリアルは、情報提供のみを目的としています。
コードを使用する前に、必ずテストしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
  <style>
    thead {
      display: table-header-group;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>住所</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>山田太郎</td>
        <td>30歳</td>
        <td>東京都渋谷区</td>
      </tr>
      <tr>
        <td>佐藤花子</td>
        <td>25歳</td>
        <td>大阪府大阪市</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
  <style>
    @media print {
      thead {
        display: table-header-group;
      }
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>住所</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>山田太郎</td>
        <td>30歳</td>
        <td>東京都渋谷区</td>
      </tr>
      <tr>
        <td>佐藤花子</td>
        <td>25歳</td>
        <td>大阪府大阪市</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

印刷時にテーブルヘッダーを繰り返す：その他の方法

方法3：JavaScriptを使用する

JavaScriptを使用して、印刷時にヘッダー行を複製することができます。

例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
  <script>
    function printHeader() {
      var header = document.querySelector('thead');
      var clone = header.cloneNode(true);
      document.body.appendChild(clone);
    }

    window.onload = function() {
      document.getElementById('print').onclick = printHeader;
    };
  </script>
</head>
<body>
  <button id="print">印刷</button>
  <table>
    <thead>
      <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>住所</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>山田太郎</td>
        <td>30歳</td>
        <td>東京都渋谷区</td>
      </tr>
      <tr>
        <td>佐藤花子</td>
        <td>25歳</td>
        <td>大阪府大阪市</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

方法4：テンプレートエンジンを使用する

テンプレートエンジンを使用して、印刷用のHTMLを生成することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  {{#each rows}}
    <tr>
      {{#each columns}}
        <td>{{value}}</td>
      {{/each}}
    </tr>
  {{/each}}
</body>
</html>

var data = {
  rows: [
    {
      columns: [
        {
          value: "名前"
        },
        {
          value: "年齢"
        },
        {
          value: "住所"
        }
      ]
    },
    {
      columns: [
        {
          value: "山田太郎"
        },
        {
          value: "30歳"
        },
        {
          value: "東京都渋谷区"
        }
      ]
    },
    {
      columns: [
        {
          value: "佐藤花子"
        },
        {
          value: "25歳"
        },
        {
          value: "大阪府大阪市"
        }
      ]
    }
  ]
};

var template = Handlebars.compile(document.getElementById('template').innerHTML);
var html = template(data);
document.body.appendChild(html);

方法5：PDFライブラリを使用する

PDFライブラリを使用して、PDFファイルにテーブルを生成することができます。

var pdf = new jsPDF();
pdf.setFontSize(12);
pdf.text("テーブル", 10, 10);
pdf.table(10, 20, data, {
  headers: ["名前", "年齢", "住所"]
});
pdf.save("table.pdf");

各方法には、それぞれメリットとデメリットがあります。

メリットとデメリット

方法	メリット	デメリット
`thead` 要素の `display` プロパティを `table-header-group` に設定する	簡単	ブラウザによっては対応していない
`@media print` ルールを使用する	柔軟性が高い	コード量が少し増える
JavaScriptを使用する	柔軟性が高い	コード量が少し増える
テンプレートエンジンを使用する	コード量が少なく、読みやすい	テンプレートエンジンの知識が必要
PDFライブラリを使用する	印刷レイアウトを細かく制御できる	コード量が少し増える