[HTML] ＜table＞のヘッダ行だけ固定し、ボディ部内のみスクロールさせる方法

やりたかったことは、HTMLの表でヘッダ行だけスクロールせず固定表示しつつ、
２行目以降の表のみ縦スクロールさせること。

Excelで例えると「ウィンドウ枠の固定」＞「先頭行の固定」みたいなものを実現したい。

普通にテーブルを２つに分けると、それぞれの列幅が微妙に変わってしまう。
固定値を指定すればもちろん、揃えられるけど、ウィンドウ幅いっぱいに使いたい。
そんでもって、表の高さもウィンドウ高さに合わせ自動調整したい。
更に、スクロールバーが表示、非表示された場合、また上下のテーブル列幅が変わってしまうので、これもピッタリ列幅を合わせたい。
そんな、感じでハマりポイントがいくつもあったけど、何とかそれっぽいのが出来たので、忘れないうちに覚書。

サンプルはこちら。

HTMLソース

<html>
<head>
<style type="text/css">
    table td, table th {
        border: 1px solid black;
    }
    table{
        width: 100%;
        table-layout: fixed;
        overflow-wrap : break-word;
    }
    div.dHead {
        background-color: rgb(200, 200, 255);
    }
    div.dBody {
        width: 97vw;
        overflow: auto;
        height: 600px;
        background-color: rgb(255, 255, 220);
    }
</style>
<script>
function setTableHeight(){
    document.getElementById("dBody").style.height = window.innerHeight -200 + "px";
    document.getElementById("dHead").style.width = document.getElementById("dBody").clientWidth + "px";
}
window.onresize = function() {
    setTableHeight();
}
</script>
</head>
<body onload="setTableHeight();">

<h3>&lt;table&gt;のヘッダ行だけ固定し、ボディ部内のみスクロール<h3>

<div class="dHead" id="dHead">
    <table>
        <tr>
            <th>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</th>
            <th>B</th>
            <th>CCC</th>
            <th>DD</th>
        </tr>
    </table>
</div>

<div class="dBody" id="dBody">
  <table>
    <tr>
      <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
    </tr>
  </table>
</div>

</body>
</html>

これを更にゴリゴリして「全力検索」に無事反映することができた。