ここでは、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 部にも罫線を設定する必要があります。残念!
都道府県 | 市町村 |
---|---|
北海道 | 釧路市 |
東京都 | 八王子市 |
沖縄県 | 那覇市 |
静岡県 | 熱海市 |
神奈川県 | 横浜市 |
福井県 | 福井市 |
富山県 | 富山市 |
石川県 | 金沢市 |
コンピュータに詳しい方と思い、書き込んでいます。
私のPCが立ち上がらなくなりました。
メーカーはHP・17インチノートSSDです。
さる証券会社のトレードソフトをいじっていて、
その文字を大きくするため解像度を何回も変えていました。
さらにソフトにも文字の大小を変えるボタンが付いていました。
両方をいじっていたら、ある時ウインドウズ7が立ち上がらなくなりました。
HPのロゴまでは行くのですがW7になると黒い画面になり、
左上隅に横棒プロンプトだけピコピコして進みません。
HPのモードで修理を試みるのですが回復しません。
設定解像度に問題がおきたのだろうと想像します。
起動用CDがないのですが、なんとか修復できないでしょうか?