スクロール幅対応メモ

見出しと明細で２つのテーブルがあり、スクロール幅を考慮し見出しと明細で線をずらさないようにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176603/a616c5c7-0853-4588-84fd-ad5ca1f859b9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176603/a53f349a-830e-4d99-bdc5-b39b815c688d.png)

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スクロール同期テーブル</title>
    <style>
        .table-container {
            width: 100%;
        }

        /* 見出し部分 */
        .table-header {
            border-bottom: 2px solid #ccc;
        }

        /* 明細部分 */
        .table-body {
            width: 100%;
            overflow-x: auto;
            max-height: 200px;
        }

        /* テーブルの共通スタイル */
        table {
          table-layout: fixed;
    width: 100%;
}


        th, td {
            padding: 8px;
            border: 1px solid #ddd;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
        }


        .table-header table {
            width: calc(100% - 15px); /* スクロールバーの幅を引く */
        }


    </style>
</head>
<body>

<div class="table-container">
    <!-- 見出し部分 -->
    <div class="table-header">
        <table>
            <colgroup>
                <col style="width: 30%;">
                <col style="width: 30%;">
                <col style="width: 40%;">

              
            </colgroup>
            <thead>
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                    <th>列3</th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- 明細部分 -->
    <div class="table-body">
        <table>
            <colgroup>
                <col style="width: 30%;">
                <col style="width: 30%;">
                <col style="width: 40%;">
            </colgroup>
            <tbody>
                <tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
                <tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
                <tr><td>データ7</td><td>データ8</td><td>データ9</td></tr>
                <tr><td>データ10</td><td>データ11</td><td>データ12</td></tr>
                <tr><td>データ13</td><td>データ14</td><td>データ15</td></tr>
                <tr><td>データ16</td><td>データ17</td><td>データ18</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script>

</script>

</body>
</html>


```


スクロール幅計算
```idex.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スクロール同期テーブル</title>
    <style>
        .table-container {
            width: 100%;
        }

        /* 見出し部分 */
        .table-header {
            border-bottom: 2px solid #ccc;
        }

        /* 明細部分 */
        .table-body {
            width: 100%;
            overflow-x: auto;
            max-height: 200px;
        }

        /* テーブルの共通スタイル */
        table {
            table-layout: auto;
            width: 100%;
        }

        th, td {
            padding: 8px;
            border: 1px solid #ddd;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
        }

        /* 見出しの幅を動的に調整 */
        .table-header table {
            width: 100%;
        }
    </style>
</head>
<body>

<div class="table-container">
    <!-- 見出し部分 -->
    <div class="table-header">
        <table>
            <colgroup>
                <col style="width: 30%;">
                <col style="width: 30%;">
                <col style="width: 40%;">
            </colgroup>
            <thead>
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                    <th>列3</th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- 明細部分 -->
    <div class="table-body">
        <table>
            <colgroup>
                <col style="width: 30%;">
                <col style="width: 30%;">
                <col style="width: 40%;">
            </colgroup>
            <tbody>
                <tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
                <tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
                <tr><td>データ7</td><td>データ8</td><td>データ9</td></tr>
                <tr><td>データ10</td><td>データ11</td><td>データ12</td></tr>
                <tr><td>データ13</td><td>データ14</td><td>データ15</td></tr>
                <tr><td>データ16</td><td>データ17</td><td>データ18</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const headerTable = document.querySelector(".table-header table");
        const bodyDiv = document.querySelector(".table-body");

        function adjustHeaderWidth() {
            const scrollbarWidth = bodyDiv.offsetWidth - bodyDiv.clientWidth;
            headerTable.style.width = `calc(100% - ${scrollbarWidth}px)`;
        }

        adjustHeaderWidth();
        window.addEventListener("resize", adjustHeaderWidth);
    });
</script>

</body>
</html>


```