スクロールバーの幅はブラウザやOSによって異なるため、固定の値を使用するのは理想的ではありません。そのため、スクロールバーの幅を動的に取得する方法があります。以下は、スクロールバーの幅を動的に計算し、複数行のセルにも対応できるようにした例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5列30行の表</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
text-align: center;
padding: 8px;
word-wrap: break-word;
}
th {
background-color: #f2f2f2;
}
thead, tbody {
display: block;
}
tbody {
height: 400px; /* Set the height you need */
overflow: auto;
}
tr {
display: table;
width: 100%;
table-layout: fixed;
}
.fixed-header {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
.fixed-row {
position: sticky;
background: white;
z-index: 5;
}
</style>
</head>
<body>
<table>
<thead>
<tr class="fixed-header">
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
<tr class="fixed-row" id="fixed-row">
<td>行1列1</td><td>行1列2</td><td>行1列3</td><td>行1列4</td><td>行1列5</td>
</tr>
</thead>
<tbody>
<tr><td>行2列1</td><td>行2列2</td><td>行2列3</td><td>行2列4</td><td>行2列5</td></tr>
<tr><td>行3列1</td><td>行3列2</td><td>行3列3</td><td>行3列4</td><td>行3列5</td></tr>
<tr><td>行4列1</td><td>行4列2</td><td>行4列3</td><td>行4列4</td><td>行4列5</td></tr>
<tr><td>行5列1</td><td>行5列2</td><td>行5列3</td><td>行5列4</td><td>行5列5</td></tr>
<tr><td>行6列1</td><td>行6列2</td><td>行6列3</td><td>行6列4</td><td>行6列5</td></tr>
<tr><td>行7列1</td><td>行7列2</td><td>行7列3</td><td>行7列4</td><td>行7列5</td></tr>
<tr><td>行8列1</td><td>行8列2</td><td>行8列3</td><td>行8列4</td><td>行8列5</td></tr>
<tr><td>行9列1</td><td>行9列2</td><td>行9列3</td><td>行9列4</td><td>行9列5</td></tr>
<tr><td>行10列1</td><td>行10列2</td><td>行10列3</td><td>行10列4</td><td>行10列5</td></tr>
<tr><td>行11列1</td><td>行11列2</td><td>行11列3</td><td>行11列4</td><td>行11列5</td></tr>
<tr><td>行12列1</td><td>行12列2</td><td>行12列3</td><td>行12列4</td><td>行12列5</td></tr>
<tr><td>行13列1</td><td>行13列2</td><td>行13列3</td><td>行13列4</td><td>行13列5</td></tr>
<tr><td>行14列1</td><td>行14列2</td><td>行14列3</td><td>行14列4</td><td>行14列5</td></tr>
<tr><td>行15列1</td><td>行15列2</td><td>行15列3</td><td>行15列4</td><td>行15列5</td></tr>
<tr><td>行16列1</td><td>行16列2</td><td>行16列3</td><td>行16列4</td><td>行16列5</td></tr>
<tr><td>行17列1</td><td>行17列2</td><td>行17列3</td><td>行17列4</td><td>行17列5</td></tr>
<tr><td>行18列1</td><td>行18列2</td><td>行18列3</td><td>行18列4</td><td>行18列5</td></tr>
<tr><td>行19列1</td><td>行19列2</td><td>行19列3</td><td>行19列4</td><td>行19列5</td></tr>
<tr><td>行20列1</td><td>行20列2</td><td>行20列3</td><td>行20列4</td><td>行20列5</td></tr>
<tr><td>行21列1</td><td>行21列2</td><td>行21列3</td><td>行21列4</td><td>行21列5</td></tr>
<tr><td>行22列1</td><td>行22列2</td><td>行22列3</td><td>行22列4</td><td>行22列5</td></tr>
<tr><td>行23列1</td><td>行23列2</td><td>行23列3</td><td>行23列4</td><td>行23列5</td></tr>
<tr><td>行24列1</td><td>行24列2</td><td>行24列3</td><td>行24列4</td><td>行24列5</td></tr>
<tr><td>行25列1</td><td>行25列2</td><td>行25列3</td><td>行25列4</td><td>行25列5</td></tr>
<tr><td>行26列1</td><td>行26列2</td><td>行26列3</td><td>行26列4</td><td>行26列5</td></tr>
<tr><td>行27列1</td><td>行27列2</td><td>行27列3</td><td>行27列4</td><td>行27列5</td></tr>
<tr><td>行28列1</td><td>行28列2</td><td>行28列3</td><td>行28列4</td><td>行28列5</td></tr>
<tr><td>行29列1</td><td>行29列2</td><td>行29列3</td><td>行29列4</td><td>行29列5</td></tr>
<tr><td>行30列1</td><td>行30列2</td><td>行30列3</td><td>行30列4</td><td>行30列5</td></tr>
</tbody>
</table>
<script>
window.addEventListener('load', function() {
var headerHeight = document.querySelector('.fixed-header').offsetHeight;
var fixedRow = document.querySelector('.fixed-row');
fixedRow.style.top = headerHeight + 'px';
});
// Function to dynamically calculate scrollbar width
function getScrollbarWidth() {
var outer = document.createElement('div');
outer.style.visibility = '
hidden';
outer.style.overflow = 'scroll';
outer.style.msOverflowStyle = 'scrollbar'; // Needed for WinJS apps
document.body.appendChild(outer);
var inner = document.createElement('div');
outer.appendChild(inner);
var scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
outer.parentNode.removeChild(outer);
return scrollbarWidth;
}
// Adjust the width of the thead to account for scrollbar
window.addEventListener('load', function() {
var thead = document.querySelector('thead');
var scrollbarWidth = getScrollbarWidth();
thead.style.width = `calc(100% - ${scrollbarWidth}px)`;
});
</script>
</body>
</html>
このコードでは、以下のことを行っています：
-
fixed-headerクラスとfixed-rowクラスを使って、1行目と2行目を固定。 - JavaScriptを使って、
fixed-rowのtopプロパティを動的に設定し、ヘッダーの高さに応じて位置を調整。 - スクロールバーの幅を動的に計算し、その幅に基づいて
theadの幅を調整。
これにより、ヘッダーと2行目が複数行になっても正しく固定され、下の部分をスクロールできるようになります。