前端表格最佳實踐：讓表頭固定、內容可滾動且列寬完美對齊

需求：HTML <table> 表頭固定不動，<tbody> 內容垂直滾動，且表頭與內容欄寬嚴絲合縫對齊。本文提供三種主流方案優劣比較與實作細節。

方案比較

推薦方案一：CSS Sticky（現代專案首選）

<div class="table-container" style="height: 400px; overflow-y: auto;">
  <table class="sticky-header">
    <thead>
      <tr><th>ID</th><th>Name</th><th>Age</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Alice</td><td>25</td></tr>
      <!-- 大量資料列 -->
    </tbody>
  </table>
</div>

<style>
.table-container { overflow-y: auto; max-height: 400px; }
.sticky-header th {
  position: sticky;
  top: 0;
  background: #f5f5f5;
  z-index: 1;          /* 確保表頭浮在內容之上 */
  border-bottom: 2px solid #ddd;
}
/* 可選：第一欄也固定 */
.sticky-header th:first-child,
.sticky-header td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
}
</style>

推薦方案二：雙 Table + JS 同步欄寬（IE 相容）

<div class="table-wrap">
  <table id="headerTable"><thead><tr><th>ID</th><th>Name</th></tr></thead></table>
  <div class="body-wrap" style="height:300px; overflow-y:auto;">
    <table id="bodyTable"><tbody><tr><td>1</td><td>Alice</td></tr>...</tbody></table>
  </div>
</div>

<script>
function syncColumnWidths() {
  const hCells = $('#headerTable th');
  const bCells = $('#bodyTable tbody tr:first td');
  hCells.each(function(i) {
    const w = $(bCells[i]).outerWidth();
    $(this).outerWidth(w);
    $(bCells[i]).outerWidth(w);
  });
}
// 初始化 + 視窗變化時同步
$(window).on('load resize', syncColumnWidths);
// 若資料動態載入，在渲染完成後呼叫 syncColumnWidths()
</script>

關鍵細節處理

• 滾動條佔位：雙 Table 方案中，表頭 Table 需預留滾動條寬度（通常 17px），或在表頭最後一欄加 <th style="width:17px"></th>。
• 邊框合併：設定 table { border-collapse: collapse; } 避免雙線。
• 動態資料：AJAX 載入資料後，必須重新觸發欄寬同步。
• 列寬單位：建議用 px 固定寬，避免百分比導致對齊偏差。

現成插件推薦

• DataTables.net：scrollY + scrollX + fixedHeader 選項，功能最完整。
• FixedHeaderTable (jQuery)：輕量、專注固定表頭。
• Ant Design Table / Element UI Table：框架內建 sticky 屬性，開箱即用。

選型建議

1. 現代瀏覽器環境 → 直接用 position: sticky，最簡潔。
2. 需支援 IE11 → 雙 Table + JS 同步欄寬。
3. 需凍結列 + 凍結行 → 引入 DataTables 或框架內建 Table 組件。

掌握核心原理（DOM 結構分離或 CSS 定位），即可根據專案限制選擇最適合的固定表頭方案。