現在、タイトルに書いたような表をHTMLで実現させたいと思い、下記のページを参考にコードを書いているのですが、少しだけ改造したところ、ヘッダ行が思ったように表示されず、悩んでおります。
参考ページ HTML/CSSヘッダー固定のスクロールテーブル
スクロールに対応させるため、テーブル内のパーツをblock要素にしている点が特徴です。
現在書いているコードは以下の通りです。上記ページで書かれてるコードとの主要な相違点は、(1)表全体の横幅を100%にしている(2)各列の横幅の指定を%単位にしている、の2点です。また、(3)分かりやすさのため、罫線表示&左寄せをしています。
HTML
1<table> 2 <thead class="scrollHead"> 3 <tr ><th class="no">番号</th><th class="name">お名前</th><th class="address">連絡先</th></tr> 4 </thead> 5 <tbody class="scrollBody"> 6 <tr><td class="no">1</td><td class="name">半田</td><td class="address">handa@xxx.com<td></tr> 7 <tr><td class="no">2</td><td class="name">野崎くん</td><td class="address">nozaki@xxx.com<td></tr> 8 <tr><td class="no">3</td><td class="name">なにゃこ</td><td class="address">nagarekawa@xxx.com<td></tr> 9 <tr><td class="no">4</td><td class="name">ゆりか</td><td class="address">rainbow@xxx.com<td></tr> 10 <tr><td class="no">5</td><td class="name">るるも</td><td class="address">majimoji@xxx.com<td></tr> 11 <tr><td class="no">6</td><td class="name">ヒメくん</td><td class="address">hime@xxx.com<td></tr> 12 </tbody> 13</table>
CSS
1table { 2 width: 100%; //相違点(1) テーブル全体の横幅を100%にしている 3} 4 5/*スクロール用*/ 6thead.scrollHead,tbody.scrollBody{ 7 display:block; 8} 9tbody.scrollBody{ 10 overflow-y: scroll; 11 height: 100px; 12} 13 14/*幅調整*/ 15td,th{ 16 text-align: left; //相違点(3) 左寄せにしている 17 table-layout: fixed; 18 border: 2px solid; //相違点(3) 罫線を表示 19} 20.no{ 21 width: 20%; //相違点(2) 横幅の指定を%単位にしている 22} 23.name{ 24 width: 60%; //相違点(2) 横幅の指定を%単位にしている 25} 26.address{ 27 width: 20%; //相違点(2) 横幅の指定を%単位にしている 28}
以上のコードの場合、以下の画像のようなレイアウトになってしまいます。
ボディ部分は思ったようなレイアウトになっているのですが、ヘッダ部分が対応できていないような状態です。
ヘッダの横幅も、ボディと同じような横幅になるような解決策、または代替案がありましたら、ご教授いただけると幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/14 22:04