HTML、CSS、JavaScriptでテーブルに上下スクロールバーを実装する方法

2024-06-24

HTML、CSS、JavaScript を使ってテーブルに上下の横スクロールバーを実装する方法

この機能を実現するには、HTML、CSS、JavaScript を組み合わせる方法が一般的です。以下では、それぞれのステップを詳しく説明します。

HTML 構造

まず、HTML でテーブル構造を定義します。以下の例では、<table> タグと <tr>、<th>、<td> タグを使ってシンプルなテーブルを作成しています。

<table>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
    <th>...</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

CSS スタイル

次に、CSS でテーブルとスクロールバーのスタイルを設定します。以下の例では、テーブルを親コンテナで囲み、横幅を制限し、overflow-x プロパティで横スクロールバーを表示するように設定しています。スクロールバーの外観もカスタマイズできます。

.table-container {
  width: 500px; /* テーブルの横幅 */
  overflow-x: auto;
}

table {
  width: 100%; /* 親コンテナの幅いっぱいに広げる */
}

JavaScript によるスクロール同期

デフォルトでは、上下のスクロールバーは独立して動作します。つまり、上部のスクロールバーでスクロールしても、下部のスクロールバーは連動しません。

これを解決するには、JavaScript を使ってスクロール位置を同期させる必要があります。以下の例では、jQuery ライブラリを使用して、上部と下部のスクロールバーの scroll イベントを捕捉し、互いのスクロール位置を更新しています。

$(document).ready(function() {
  $('.top-scrollbar, .bottom-scrollbar').on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    $('.top-scrollbar, .bottom-scrollbar').scrollTop(scrollTop);
  });
});

このコードは、上部または下部のスクロールバーがスクロールされると、その scrollTop プロパティの値を取得し、他のスクロールバーにも同じ値をセットすることで、常に同じ位置を表示するようにしています。

補足

上記のコードはあくまでも基本的な例であり、必要に応じてカスタマイズすることができます。例えば、スクロールバーの外観をさらに装飾したり、レスポンシブデザインに対応したりすることも可能です。

また、jQuery 以外にも、SimpleBar や PerfectScrollbar などの JavaScript ライブラリを使用して、より高度なスクロールバー機能を実装することもできます。

HTML (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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="table-container">
    <table>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
        <th>列5</th>
        <th>列6</th>
        <th>列7</th>
        <th>列8</th>
      </tr>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
        <td>データ4</td>
        <td>データ5</td>
        <td>データ6</td>
        <td>データ7</td>
        <td>データ8</td>
      </tr>
      <tr>
        <td>データ9</td>
        <td>データ10</td>
        <td>データ11</td>
        <td>データ12</td>
        <td>データ13</td>
        <td>データ14</td>
        <td>データ15</td>
        <td>データ16</td>
      </tr>
      <tr>
        <td>データ17</td>
        <td>データ18</td>
        <td>データ19</td>
        <td>データ20</td>
        <td>データ21</td>
        <td>データ22</td>
        <td>データ23</td>
        <td>データ24</td>
      </tr>
      <tr>
        <td>データ25</td>
        <td>データ26</td>
        <td>データ27</td>
        <td>データ28</td>
        <td>データ29</td>
        <td>データ30</td>
        <td>データ31</td>
        <td>データ32</td>
      </tr>
    </table>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (style.css):

.table-container {
  width: 500px; /* テーブルの横幅 */
  overflow-x: auto;
  margin: 20px auto;
}

table {
  width: 100%; /* 親コンテナの幅いっぱいに広げる */
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 5px;
}

.top-scrollbar, .bottom-scrollbar {
  width: 10px; /* スクロールバーの幅 */
  height: 100%; /* テーブルの高さと同じ高さに設定 */
  position: absolute;
  top: 0;
  background-color: #eee;
}

.top-scrollbar {
  left: 0;
}

.bottom-scrollbar {
  right: 0;
}

.scrollbar-thumb {
  width: 8px; /* スクロールバーサムの幅 */
  height: 50%; /* スクロールバーサムの高さ */
  background-color: #ddd;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

JavaScript (script.js):

$(document).ready(function() {
  $('.top-scrollbar, .bottom-scrollbar').on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    $('.top-scrollbar, .bottom-scrollbar').scrollTop(scrollTop);
  });
});

説明

このコードは以下の通り動作します。