【CSSとJavaScriptで実現】HTMLテーブルを固定列とスクロール可能なボディに分ける方法

2024-04-16

HTML テーブルに固定列とスクロール可能なボディを作成する方法

方法 1: CSS グリッド レイアウトを使用する

CSS グリッド レイアウトは、複雑なレイアウトを作成するための強力なツールです。固定列とスクロール可能なボディを持つ HTML テーブルを作成するには、次の手順に従います。

  1. HTML にテーブル要素を作成します。
  2. <table> 要素に display: grid プロパティを設定します。
  3. <th> 要素に grid-column: 1; プロパティを設定します。これは、左列を固定列として定義します。
  4. 必要に応じてスタイルを追加します。

例:

<table>
  <thead>
    <tr>
      <th>固定列</th>
      <th>列 1</th>
      <th>列 2</th>
    </tr>
  </thead>
  <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>
  </tbody>
</table>

table {
  display: grid;
  grid-template-columns: 150px repeat(2, 1fr);
}

th {
  grid-column: 1;
  background-color: #f0f0f0;
}

tbody {
  grid-column: 2 / span 2;
  overflow-x: auto;
}

方法 2: JavaScript を使用する

JavaScript を使用して、固定列とスクロール可能なボディを持つ HTML テーブルを作成することもできます。これを行うには、次の手順に従います。

  1. <table> 要素に id 属性を設定します。
  2. JavaScript コードで、テーブル要素を取得し、固定列とスクロール可能なボディを作成します。
<table>
  <thead>
    <tr>
      <th>固定列</th>
      <th>列 1</th>
      <th>列 2</th>
    </tr>
  </thead>
  <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>
  </tbody>
</table>

const table = document.getElementById('myTable');

const fixedColumn = document.createElement('div');
fixedColumn.classList.add('fixed-column');

const scrollableBody = document.createElement('div');
scrollableBody.classList.add('scrollable-body');

const headerRow = table.querySelector('thead tr');
const fixedColumnHeader = headerRow.querySelector('th:first-child');

fixedColumn.appendChild(fixedColumnHeader);

for (const row of table.querySelectorAll('tbody tr')) {
  const fixedCell = row.querySelector('td:first-child');
  fixedColumn.appendChild(fixedCell);

  const scrollableRow = row.cloneNode(true);
  scrollableRow.removeChild(scrollableRow.firstChild);
  scrollableBody.appendChild(scrollableRow);
}

table.parentNode.insertBefore(fixedColumn, table);
table.parentNode.insertBefore(scrollableBody, table);

.fixed-column {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  background-color: #f0f0f0;
}

.scrollable-body {
  overflow-x: auto;
}

どちらの方法を選択するかは、ニーズによって異なります。 CSS グリッド レイアウトは、より簡潔で、メンテナンスが容易です。ただし、JavaScript を使用すると、より多くの制御と柔軟性を



方法 1: CSS グリッド レイアウトを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定列とスクロール可能なボディを持つ HTML テーブル</title>
  <style>
    table {
      display: grid;
      grid-template-columns: 150px repeat(2, 1fr);
    }

    th {
      grid-column: 1;
      background-color: #f0f0f0;
    }

    tbody {
      grid-column: 2 / span 2;
      overflow-x: auto;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>固定列</th>
        <th>列 1</th>
        <th>列 2</th>
      </tr>
    </thead>
    <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>
    </tbody>
  </table>
</body>
</html>

方法 2: JavaScript を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定列とスクロール可能なボディを持つ HTML テーブル</title>
  <style>
    .fixed-column {
      position: absolute;
      left: 0;
      top: 0;
      width: 150px;
      background-color: #f0f0f0;
    }

    .scrollable-body {
      overflow-x: auto;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>固定列</th>
        <th>列 1</th>
        <th>列 2</th>
      </tr>
    </thead>
    <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>
    </tbody>
  </table>

  <script>
    const table = document.getElementById('myTable');

    const fixedColumn = document.createElement('div');
    fixedColumn.classList.add('fixed-column');

    const scrollableBody = document.createElement('div');
    scrollableBody.classList.add('scrollable-body');

    const headerRow = table.querySelector('thead tr');
    const fixedColumnHeader = headerRow.querySelector('th:first-child');

    fixedColumn.appendChild(fixedColumnHeader);

    for (const row of table.querySelectorAll('tbody tr')) {
      const fixedCell = row.querySelector('td:first-child');
      fixedColumn.appendChild(fixedCell);

      const scrollableRow = row.cloneNode(true);
      scrollableRow.removeChild(scrollableRow.firstChild);
      scrollableBody.appendChild(scrollableRow);
    }

    table.parentNode.insertBefore(fixedColumn, table);
    table.parentNode.insertBefore(scrollableBody, table);
  </script>
</body>
</html>

これらのコードは、基本的な例です。必要に応じて、スタイルや機能をカスタマイズできます。

その他のヒント

  • テーブルの幅が固定の場合、width プロパティを使用して固定列とスクロール可能なボディの幅を設定できます。
  • スクロールバーの外観をカスタマイズするには、overflow-x プロパティと scrollbar-width プロパティを使用できます。
  • レスポンシブなデザインを作成するには、メディアクエリを使用して、さまざまな


方法 3: position: sticky を使用する

position: sticky CSS プロパティを使用して、固定列を作成することもできます。これを行うには、次の手順に従います。

<table>
  <thead>
    <tr>
      <th>固定列</th>
      <th>列 1</th>
      <th>列 2</th>
    </tr>
  </thead>
  <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>
  </tbody>
</table>

th {
  position: sticky;
  top: 0;
  left: 0;
  background-color: #f0f0f0;
}

tbody {
  overflow-x: auto;
}

方法 4: テーブルライブラリを使用する

Bootstrap や DataTables などのテーブルライブラリを使用して、固定列とスクロール可能なボディを持つ HTML テーブルを作成することもできます。これらのライブラリは、多くの場合、この機能を簡単に実現するための組み込みコンポーネントまたはユーティリティを提供します。

上記の方法でニーズが満たされない場合は、カスタム JavaScript ソリューションを作成することもできます。これには、より高度なロジックと制御が必要になる場合があります。

HTML テーブルに固定列とスクロール可能なボディを作成する方法はいくつかあります。最適な方法は、ニーズと要件によって異なります。

どの方法を選択する場合でも、次の点に注意する必要があります。

  • テーブルの幅
  • スクロールバーの外観
  • レスポンシブデザイン
  • アクセシビリティ

html css html-table

HTML、CSS、JavaScriptでIframeを自在に操る

まず、Iframeを埋め込むコンテナとなる要素が必要です。この例では、div要素を使用します。次に、Iframe要素を追加します。height属性は後ほどCSSで設定するため、ここでは省略します。次に、CSSを使用してIframeの高さ設定を行います。...

 
html css iframe HTML、CSS、JavaScriptでIframeを自在に操る

最新版！insetプロパティでposition: fixed要素を中央に配置する方法

これは最もシンプルで現代的な方法です。inset: 0; は、要素のすべての辺から親要素の余白まで0にします。margin: auto; は、左右の余白を自動的に設定し、要素を水平方向の中央に配置します。この方法は、すべてのブラウザで動作します。...

 
css position centering 最新版！insetプロパティでposition: fixed要素を中央に配置する方法

CSSとJavaScriptでスクロールバーを消す

overflow プロパティは、要素からはみ出したコンテンツの処理方法を指定します。このプロパティを使って、スクロールバーを非表示にすることができます。例このコードは、div 要素内に長い文章を配置し、overflow プロパティを hidden に設定しています。これにより、スクロールバーが表示されなくなります。...

 
css browser scrollbar CSSとJavaScriptでスクロールバーを消す

「screen」と「only screen」の違い

screenscreenは、幅広い画面デバイスを対象としたメディアタイプです。具体的には、以下のようなデバイスが含まれます。デスクトップパソコンノートパソコンタブレットスマートフォン違いscreenとonly screenの主な違いは、プリンターなどの非画面デバイスを除外するかどうかです。...

 
css media queries 「screen」と「only screen」の違い

第三者ライブラリを使ってJavaScriptからSQLiteデータベースにアクセス

JavaScript から SQLite データベースに直接アクセスすることはできません。しかし、いくつかの方法で間接的にアクセスすることができます。方法Web SQL Database APIWeb SQL Database APIそれぞれの方法のメリットとデメリット...

 
javascript html database 第三者ライブラリを使ってJavaScriptからSQLiteデータベースにアクセス

SQL SQL SQL SQL Amazon で見る


HTML、CSS、Twitter Bootstrapで実現！テーブルの固定ヘッダーとスクロール可能なボディ
HTML、CSS、Twitter Bootstrapで実現！テーブルの固定ヘッダーとスクロール可能なボディ

HTML、CSS、Twitter Bootstrapを用いて、テーブルのヘッダーを固定し、ボディ部分をスクロールできるようにする方法について解説します。目次HTMLCSSTwitter Bootstrap以下のコードは、固定ヘッダーとスクロール可能なボディを持つテーブルの構造を示しています。