HTML、CSS、JavaScript で正しく機能する、水平スクロールバーと垂直スクロールバーの両方を備えた固定ヘッダー テーブルを作成するにはどうすればよいですか?

に水平スクロールバーと垂直スクロールバーを備えた固定ヘッダー テーブルを使用して水平スクロールバーと垂直スクロールバーを備えた固定ヘッダー テーブルを作成することについての質問です。 HTML、CSS、JavaScript。問題は、垂直スクロールバーをテーブルに追加すると、スクロールバーが混乱することです。

提供された HTML および CSS コードは、ヘッダーと本文を含む基本的なテーブルを作成しますが、スクロールバーが正しく動作しません。 。 JavaScript コードはスクロールバーにイベント リスナーを追加し、ユーザーがテーブルをスクロールするとヘッダーも本文と一緒に移動します。

この問題の解決策は、HTML、CSS、JavaScript を組み合わせて使用​​することです。 。 HTML コードはテーブルとヘッダーを作成し、CSS コードはテーブルとスクロールバーのスタイルを設定します。 JavaScript コードはイベント リスナーをスクロールバーに追加し、ユーザーがテーブルをスクロールするとヘッダーが本文と一緒に移動するようにします。

更新された HTML コードは次のとおりです:

    <title>Fixed header table with horizontal scrollbar and vertical scrollbar on</title>
    <link rel="stylesheet" href="style.css">


<div>
<p>こちら更新された CSS コード:</p>
<pre class="brush:php;toolbar:false">body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
table {
    border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
    width: 100%;
}

.outer-container {
    background-color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
    right: 300px;
    bottom: 40px;