[HTML] テーブルのヘッダを固定表示する（display:block;）

ここでは、HTMLにおいてテーブルのヘッダ部を固定して中身のみをスクロールさせるサンプルコードを掲載しています。

色々な方法があるとは思いますが（詳細はわかりませんが）、その1例になります。

テーブルのヘッダを固定表示する

サンプルコードは以下のとおりです。theadとtbodyタグをブロック表示させ、各列の幅を設定させています。

  <table border="1" style="border-collapse: collapse;">
    <thead style="display: block;">
      <tr>
        <th style="width:250px;border:1px solid;">都道府県</th>
        <th style="width:250px;border:1px solid;">市町村</th>
      </tr>
    </thead>
    
    <tbody style="display: block;overflow-y:scroll;height:200px;">
      <tr>
        <td style="width:250px;">北海道</td>
        <td style="width:250px;">釧路市</td>
      </tr>
      <tr>
        <td>東京都</td>
        <td>八王子市</td>
      </tr>
      <tr>
        <td>沖縄県</td>
        <td>那覇市</td>
      </tr>
      <tr>
        <td>静岡県</td>
        <td>熱海市</td>
      </tr>
      <tr>
        <td>神奈川県</td>
        <td>横浜市</td>
      </tr>
      <tr>
        <td>福井県</td>
        <td>福井市</td>
      </tr>
      <tr>
        <td>富山県</td>
        <td>富山市</td>
      </tr>
      <tr>
        <td>石川県</td>
        <td>金沢市</td>
      </tr>
    </tbody>
  </table>

実際に表示してみる

このブログの（ワードプレスの）テーマの都合で横幅は長くなっていたりしますが、上記のコードだけだと横幅いっぱいに表示されるようなことはありませんし、Chromeで見る限りはtbody 部にも罫線は出力されます。しかし、IE11 では tbody の部分の罫線が表示されないようです。thead 部のように tbody 部にも罫線を設定する必要があります。残念！

都道府県	市町村
北海道	釧路市
東京都	八王子市
沖縄県	那覇市
静岡県	熱海市
神奈川県	横浜市
福井県	福井市
富山県	富山市
石川県	金沢市