質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

7788閲覧

ボディ部分(データ行)が縦スクロールできるtableの作成

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/03/11 12:16

現在、タイトルに書いたような表を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}

以上のコードの場合、以下の画像のようなレイアウトになってしまいます。

作成される表

ボディ部分は思ったようなレイアウトになっているのですが、ヘッダ部分が対応できていないような状態です。

ヘッダの横幅も、ボディと同じような横幅になるような解決策、または代替案がありましたら、ご教授いただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

下記追加で。
多少強引ですかね。

css

1.scrollHead tr { 2 display: table; 3 width: calc(100% - 9px);/* ここの数値は調整してください。 */ 4}

投稿2018/03/12 02:32

kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/03/14 22:04

ありがとうございます。確かに、少し強引かもしれませんが・・・ひとまず対処することができました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問