Tihiroの頭を休めるIT教室

少しだけ頭使って後は根性

HTMLとスタイルシート(css)でヘッダ固定のテーブルを実現する。

概要

WEBアプリで一覧表なんかを入力する場合、ヘッダ枠を固定したテーブルにしてくれ的な要望が出たりします。いわゆる「Pushpin Header」とか言われたりするやつです。

実現方法は色々あるそうですが、ブラウザによっては動かなかったりボーダーが変になったりした結果、「んひぃ」的な声が出そうになったので、気持ち悪いですがシンプルな実現方法を残しておきます。

実現方法

  • ヘッダ用のテーブルと明細用のテーブルを用意する。
  • 明細用のテーブルをDIVで囲む。
  • DIVにスクロールするようのスタイルシートを設定する。
  • セルの幅を揃える。

コードにすると

↓な感じです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <style>
      td, th{
          border : 1px solid black;
      }
      .header_table {
          border-collapse: collapse;
          table-layout : fixed;
          background-color : lightblue;
      }
      .detail_table {
          border-collapse: collapse;
          table-layout : fixed;
          margin-top : -1px;
      }
      .detail_div {
          overflow-y : scroll;
          height : 040px; /* スクロール領域(高さ) */
          width : 280px; /* スクロール領域(幅) */
      }
      
      .col1_size {
          width : 60px;
      }
      .col2_size {
          width : 80px;
      }
      .col3_size {
          width : 100px;
      }
    </style>
  </head>
  <body>
      <table class="header_table" id="header_table" name="">
        <thead>
          <tr>
            <th class="col1_size">h1</th>
            <th class="col2_size">h2</th>
            <th class="col3_size">h3</th>
          </tr>
        </thead>
      </table>
      <div class="detail_div">
        <table class="detail_table" id="detail_table" name="">
          <tbody>
            <tr>
              <td class="col1_size">val1_1</td>
              <td class="col2_size">val1_2</td>
              <td class="col3_size">val1_3</td>
            </tr>
            <tr>
              <td class="col1_size">val2_1</td>
              <td class="col2_size">val2_2</td>
              <td class="col3_size">val2_3</td>
            </tr>
            <tr>
              <td class="col1_size">val3_1</td>
              <td class="col2_size">val3_2</td>
              <td class="col3_size">val3_3</td>
            </tr>
            <tr>
              <td class="col1_size">val4_1</td>
              <td class="col2_size">val4_2</td>
              <td class="col3_size">val4_3</td>
            </tr>
          </tbody>
        </table>
      </div>
  </body>
</html>

まとめ

スタイルシートの表示やらJavaScript(ECMAScript)やらブラウザ間の差分対応って本当に大変です。