重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【GOLF me!】初月無料お試し

javaスクリプトを使わずにCSSのみで、テーブルのヘッダを固定する方法を探しております。
ご存知の方がいらっしゃいましたら、お教え願います。

A 回答 (1件)

たとえば


  <table summary="th">
    <thead>
      <tr><td>Color Name</td><td>Hexadecimal Code</td></tr>
    </thead>
    <tbody>
      <tr><td>steelblue</td><td>4682B4</td></tr>
      <tr><td>royalblue</td><td>4169E1</td></tr>
      <tr><td>cornflowerblue</td><td>6495ED</td></tr>
      <tr><td>lightsteelblue</td><td>B0C4DE</td></tr>
      
とかだと、screenメディアに対して
table[summary="th"] {line-height:1.6em;}
table[summary="th"] thead{position:fixed;z-index:1}
table[summary="th"] td{background-color:white;}
table[summary="th"] tbody{display:block;position:relative;top:1.6em;}
とか。

なお、印刷時には、theadは各ページに配分されるのでスタイルシートの必要はありません。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!