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
既に出尽くしてる対応なので調べれば出てくると思います。
ヘッダーの項目名は固定文字でレコード部分が可変なので別テーブルにしたらずれるのは当然です。
回答1件
あなたの回答
tips
プレビュー