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

Pocket

ここでは、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 部にも罫線を設定する必要があります。残念!

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


スポンサーリンク


Pocket

One thought on “[HTML] テーブルのヘッダを固定表示する(display:block;)”

  1. クニノブ

    コンピュータに詳しい方と思い、書き込んでいます。
    私のPCが立ち上がらなくなりました。
    メーカーはHP・17インチノートSSDです。
    さる証券会社のトレードソフトをいじっていて、
    その文字を大きくするため解像度を何回も変えていました。
    さらにソフトにも文字の大小を変えるボタンが付いていました。
    両方をいじっていたら、ある時ウインドウズ7が立ち上がらなくなりました。
    HPのロゴまでは行くのですがW7になると黒い画面になり、
    左上隅に横棒プロンプトだけピコピコして進みません。
    HPのモードで修理を試みるのですが回復しません。
    設定解像度に問題がおきたのだろうと想像します。
    起動用CDがないのですが、なんとか修復できないでしょうか?

Leave a Comment

Your email address will not be published. Required fields are marked *