JavaScript と CSS を使用してテーブルの行と列を固定する方法

JavaScript と CSS を使用してテーブルの行と列を固定する方法

スクロールが可能なときにテーブルの最初の行と最初の列をロックするJavaScript と CSS を使用して、Excel の「ペインの固定」機能をシミュレートします。

JavaScript ソリューション

JavaScript ソリューションの 1 つは、2 つの別々のテーブルを作成することです:

1. 最初の行と列の見出しを含む固定ヘッダー テーブル。
2. 残りのテーブル データを含むスクロール可能な本体テーブル。

両方のテーブルは、CSS を使用して絶対的に配置されます。固定ヘッダー テーブルはボディ テーブルの上に配置されます。ページがスクロールされると、固定ヘッダーは固定されたまま本文テーブルが独立して移動します。

CSS 配置

<code class="css">/* Fixed header table */
.fixed-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Scrollable body table */
.scrollable-body {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}</code>

JavaScript Activation

<code class="javascript">// Create a table with the first row as the header
const table = document.createElement('table');
const headerRow = table.createTHead().insertRow();

// Create the first column headings
for (let i = 0; i < numColumns; i++) {
  headerRow.appendChild(document.createElement('th')).innerHTML = 'Heading ' + (i + 1);
}

// Create the body of the table with the remaining data
const body = table.createTBody();
for (let i = 0; i < numRows; i++) {
  const row = body.insertRow();
  for (let j = 0; j < numColumns; j++) {
    row.appendChild(document.createElement('td')).innerHTML = 'Data ' + (i + 1) + ', ' + (j + 1);
  }
}

// Split the table into two: fixed header and scrollable body
const fixedHeader = table.cloneNode(true);
fixedHeader.tBodies[0].remove();

const scrollableBody = table.cloneNode(true);
fixedHeader.tHead.remove();

// Add the two tables to the page
document.body.appendChild(fixedHeader);
document.body.appendChild(scrollableBody);

// Position the tables using CSS
fixedHeader.classList.add('fixed-header');
scrollableBody.classList.add('scrollable-body');</code>

このソリューションは、テーブルに完全に機能する「ペインの固定」効果を提供し、スクロール中に最初の行と列が表示されたままになるようにします。

以上がJavaScript と CSS を使用してテーブルの行と列を固定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。