🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

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

CSS

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

Q&A

解決済

1回答

847閲覧

ヘッダーを項目名とする表について

tanetanetane

総合スコア6

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/01/12 08:25

HTMLにて、表を作っています。
ページのスクロール時に項目を固定したいと考えています。

スクロールボタンを作るのではなく、ヘッダーに項目名を記載し固定する方法を取っているのですがうまくいっていません。

どうしてもヘッダーと表部分を綺麗に合わせることが出来ず左右にずれてしまいます。

ページを拡大・縮小した際も表のレイアウトが崩れないようにするためにはどうすれば良いのでしょうか。

よろしくお願いいたします。

HTML

1<html> 2<head> 3 4<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 5<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> 6<meta http-equiv="Content-Style-Type" content="text/css"> 7 8<style> 9body{ 10 font-family:メイリオ; 11 color:#333333; 12 font-weight:bold; 13 margin-top:170px; /* bodyの外側の余白を指定する */ 14 margin-right: auto; 15 margin-left : auto; 16} 17img{ 18 height:100px; 19} 20table{ 21 text-align:center; 22 border-collapse: collapse; 23} 24th,td { 25 border: solid 1px; 26} 27th{ 28 background: #3f3f3f; 29 color: #ffffff; 30} 31a:hover img{ 32 opacity:0.7; filter: alpha(opacity=70); 33} 34.header{ 35 position: fixed; 36 top: 0; 37 width:100%: 38 height:170px; 39} 40.aa{ 41 margin: 10px auto; 42} 43</style> 44 45<body> 46<center> 47 48 49 50<div class="header"> 51 <table class="aa"> 52 <tr> 53 <td style="width:90px">aaa</td> 54 <td style="width:90px">bbbbb</td> 55 <td style="width:180px">vv</td> 56 <td style="width:90px;">ccc</td> 57 <td style="width:100px">dddd</td> 58 <td style="width:100px">eee</td> 59 <td style="width:100px">fff</td> 60 <td style="width:100px">gggg</td> 61 <td style="width:100px">hhhhhh</td> 62 </tr> 63 </table> 64</div> 65 66<table> 67 <tr> 68 <td rowspan="8" style="width:90px">6~7m</td> 69 <td style="width:90px">6.25</td> 70 <td style="width:180px">A</td> 71 <td style="width:90px">AA</td> 72 <td style="width:100px">-</td> 73 <td style="width:100px">〇</td> 74 <td style="width:100px">-</td> 75 <td style="width:100px">-</td> 76 <td style="width:100px">〇</td> 77 </tr> 78 <tr> 79 <td>6.25</td> 80 <td>B</td> 81 <td>BB</td> 82 <td>-</td> 83 <td>〇</td> 84 <td>-</td> 85 <td>-</td> 86 <td>〇</td> 87 </tr> 88 <tr> 89 <td>6.38</td> 90 <td>C</td> 91 <td>CC</td> 92 <td>-</td> 93 <td>-</td> 94 <td>-</td> 95 <td>〇</td> 96 <td>-</td> 97 </tr> 98 <tr> 99 <td>6.8</td> 100 <td >D</td> 101 <td >DD</td> 102 <td >〇</td> 103 <td >-</td> 104 <td >-</td> 105 <td >-</td> 106 <td >〇</td> 107 </tr> 108 <tr> 109 <td>6.8</td> 110 <td>E</td> 111 <td>EE</td> 112 <td>-</td> 113 <td>〇</td> 114 <td>-</td> 115 <td>-</td> 116 <td>-</td> 117 </tr> 118 <tr> 119 <td>6.8</td> 120 <td>F</td> 121 <td>FF</td> 122 <td>〇</td> 123 <td>-</td> 124 <td>〇</td> 125 <td>〇</td> 126 <td>-</td> 127 </tr> 128</table> 129<br> 130 131 132 133</CENTER> 134</body> 135</html> 136

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

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

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

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

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

m.ts10806

2021/01/12 08:42

既に出尽くしてる対応なので調べれば出てくると思います。 ヘッダーの項目名は固定文字でレコード部分が可変なので別テーブルにしたらずれるのは当然です。
guest

回答1

0

ベストアンサー

typoです。

width:100%:

width:100%;

投稿2021/01/14 01:49

Lhankor_Mhy

総合スコア36928

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

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

tanetanetane

2021/02/09 05:42

ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問