固定ヘッダーがある時のページ内アンカーリンクの方法

色々調べたのですが、テーブルでのアンカーリンクだとうまくいきません。

●ヘッダーのスタイルは
#site-header {
background: #fff;
display: flex;
position: fixed;
width: 900px;
height:100px;
z-index: 100; /* 重なり順を一番上にする為に100*/
}
●HTML 　※簡単に書きます。
<div id="site-header">
　ヘッダーの内容
</div>
<div style="padding-top:100px;height:auto !important;">
<table style="margin-top:30px;">
<tr>
<td><a name="001">コード:001</a></td>
</tr>
<tr>
<td><a name="001">コード:002</a></td>
</tr>
　　　　　　…　最大100データ
<tr>
<td><a name="100">コード:100</a></td>
</tr>
</table>
</div>

上記は編集ボタンのリンクも省略しています。
別ページで編集を完了したら、
http:hoge.html#050　のようにして
アンカーリンクでコード「050」を一番上に編集したセルを表示させたいのですが
固定枠のヘッダーがあり、ずれてしまいます。
テーブル以外のは、ネットで調べると出てきますが
テーブルだと、ネットで調整する方法のmarginもpaddingも
うまく行きません。

テーブルの場合、どうしたら良いのでしょうか。
CSSで簡単にできればいいのですが、できないのであれば、他の方法でも構いません。

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

No.1 ベストアンサー 回答者： fujillin 回答日時： 2020/10/08 11:07

こんにちは

他の部分がどうなっているのか不明ですが、ひとまず、ご提示のHTMLのみで考えてみました。

1)tableのラッパーdivの
　＞style="padding-top:100px;height:auto !important;"
　を削除して

2)CSSに以下を追加
body{ margin:0; padding:0;}
#site-header { top:0; }
body>div:nth-child(2){
position:fixed;
top:100px;
width:100%;
height: calc(100% - 100px);
overflow-y:scroll;
}

という考え方ではいかがでしょうか？
他にも方法はあると思いますが、一例として。
（Chromeおおびfxで確認）

この回答へのお礼

ばっちり実現出来ました。
スタイルシートは、まだまだ勉強不足で、これから頑張ります。
本当にありがとうございました!!

お礼日時：2020/10/08 14:28