見出しと明細で２つのテーブルがあり、スクロール幅を考慮し見出しと明細で線をずらさないようにする。
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>
<style>
.table-container {
width: 100%;
}
/* 見出し部分 */
.table-header {
border-bottom: 2px solid #ccc;
}
/* 明細部分 */
.table-body {
width: 100%;
overflow-x: auto;
max-height: 200px;
}
/* テーブルの共通スタイル */
table {
table-layout: fixed;
width: 100%;
}
th, td {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f4f4f4;
}
.table-header table {
width: calc(100% - 15px); /* スクロールバーの幅を引く */
}
</style>
</head>
<body>
<div class="table-container">
<!-- 見出し部分 -->
<div class="table-header">
<table>
<colgroup>
<col style="width: 30%;">
<col style="width: 30%;">
<col style="width: 40%;">
</colgroup>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
</table>
</div>
<!-- 明細部分 -->
<div class="table-body">
<table>
<colgroup>
<col style="width: 30%;">
<col style="width: 30%;">
<col style="width: 40%;">
</colgroup>
<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>
<tr><td>データ10</td><td>データ11</td><td>データ12</td></tr>
<tr><td>データ13</td><td>データ14</td><td>データ15</td></tr>
<tr><td>データ16</td><td>データ17</td><td>データ18</td></tr>
</tbody>
</table>
</div>
</div>
<script>
</script>
</body>
</html>
スクロール幅計算
idex.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロール同期テーブル</title>
<style>
.table-container {
width: 100%;
}
/* 見出し部分 */
.table-header {
border-bottom: 2px solid #ccc;
}
/* 明細部分 */
.table-body {
width: 100%;
overflow-x: auto;
max-height: 200px;
}
/* テーブルの共通スタイル */
table {
table-layout: auto;
width: 100%;
}
th, td {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f4f4f4;
}
/* 見出しの幅を動的に調整 */
.table-header table {
width: 100%;
}
</style>
</head>
<body>
<div class="table-container">
<!-- 見出し部分 -->
<div class="table-header">
<table>
<colgroup>
<col style="width: 30%;">
<col style="width: 30%;">
<col style="width: 40%;">
</colgroup>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
</table>
</div>
<!-- 明細部分 -->
<div class="table-body">
<table>
<colgroup>
<col style="width: 30%;">
<col style="width: 30%;">
<col style="width: 40%;">
</colgroup>
<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>
<tr><td>データ10</td><td>データ11</td><td>データ12</td></tr>
<tr><td>データ13</td><td>データ14</td><td>データ15</td></tr>
<tr><td>データ16</td><td>データ17</td><td>データ18</td></tr>
</tbody>
</table>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const headerTable = document.querySelector(".table-header table");
const bodyDiv = document.querySelector(".table-body");
function adjustHeaderWidth() {
const scrollbarWidth = bodyDiv.offsetWidth - bodyDiv.clientWidth;
headerTable.style.width = `calc(100% - ${scrollbarWidth}px)`;
}
adjustHeaderWidth();
window.addEventListener("resize", adjustHeaderWidth);
});
</script>
</body>
</html>