<div>固定表格（Fixed Table）是一種常見的網頁布局技術，它可以使表格的列保持固定，不隨頁面的滾動而移動。這種布局技術通常是通過CSS的position屬性和JavaScript來實現的。在本文中，將使用幾個代碼示例來詳細說明如何實現<div>固定表格布局。</div>
<div id="example1">

示例1：固定表頭

以下示例代碼展示了如何實現一個固定表頭的效果。在表格的父容器<div>中設置overflow屬性為auto，使得表格內容超出父容器時出現滾動條。通過CSS將表格的頭部固定在頂部，使得滾動時表格頭部保持可見。

/* CSS */
.table-container {
position: relative;
overflow: auto;
height: 300px;
}
<br>
    .table-header {
position: sticky;
top: 0;
background-color: #f2f2f2;
z-index: 2;
}
<br>
    /* HTML */
<div class="table-container">
<table>
<thead class="table-header">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<!-- Table rows -->
</tbody>
</table>
</div>

</div>
<div id="example2">

示例2：固定列

以下示例代碼展示了如何實現一個固定列的效果。在表格的父容器<div>中設置overflow屬性為auto，使得表格內容超出父容器時出現滾動條。通過將表格的第一列復制一份，將其置于一個單獨的<div>中，通過CSS將該<div>的位置設為固定，在滾動時使得第一列保持可見。

/* CSS */
.table-container {
position: relative;
overflow: auto;
width: 600px;
}
<br>
    .table-body-container {
position: relative;
height: 300px;
width: auto;
left: 100px; /* 保持第一列的寬度 */
}
<br>
    .table-body-container:before {
content: "";
position: sticky;
left: 0;
z-index: 1;
background: inherit;
}
<br>
    /* HTML */
<div class="table-container">
<div class="table-body-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
<div>

真實案例參考

以下是一些真實案例中使用<div>固定表格布局的示例。這些案例演示了不同風格的<div>固定表格布局，可以作為參考來設計自己的網頁布局。

<ul> <li><a target="_blank">Fixed Table Header With Scrolling Content</a></li> <li><a target="_blank">Sticky Table Columns</a></li> <li><a target="_blank">Fixed Table Header With Scroll</a></li> </ul> </div>
<div>

使用<div>固定表格布局可以有效地提升表格的可視性和用戶體驗。通過合理地使用CSS和JavaScript，可以實現各種不同的<div>固定表格布局效果，滿足不同的需求。

</div>