bootstrap5 を使ってチェックボックとスクロールバー付きのテーブルを作成

メモ

    function toggleCheckboxes(source)
    {
      // 全てのチェックボックスを取得
      let checkboxes = document.querySelectorAll('.rowCheckbox');

      console.log(checkboxes.length);
      for (let i = 0; i < checkboxes.length; i++)
      {
        // 書くチェックボックスの状態を更新
        checkboxes[i].checked = source.checked;
      }
    }

      .scroll-container {
          /* テーブル全体のサイズ */
          height: 500px; 
          overflow-y: scroll;
          border: 1px solid #dee2e6;
      }

      .scroll-container::-webkit-scrollbar {
          width: 10px;
      }

      .scroll-container::-webkit-scrollbar-track {
          background: #f1f1f1;
      }

      .scroll-container::-webkit-scrollbar-thumb {
          background: #888;
      }

      .scroll-container::-webkit-scrollbar-thumb:hover {
          background: #555;
      }

  
    <div class="scroll-container">
      <table class="table table-bordered">
        <thead class="sticky-top bg-white">
        <tr>
          <th scope="col">
            <input class="rowCheckbox" type="checkbox" id="selectAll"
                   onclick="toggleCheckboxes(this)">
          </th>
          <th scope="col">#</th>
          <th scope="col" class="col-5">First</th>
          <th scope="col" class="col-5">Last</th>
          <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody class="table-group-divider">
        <tr>
          <td><input class="rowCheckbox" type="checkbox" name="rowSelect"></td>
          <th scope="row" >1</th>
          <td class="col-5">Mark</td>
          <td class="col-5">Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td><input class="rowCheckbox" type="checkbox" name="rowSelect"></td>
          <th scope="row" >2</th>
          <td class="col-5">Jacob</td>
          <td class="col-5">Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td><input class="rowCheckbox" type="checkbox" name="rowSelect"></td>
          <th scope="row" >3</th>
          <td colspan="2" class="col-10">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>