HTML 表格超出容器寬度時如何正確顯示橫向滾動條

常見問題

在 <div> 中包裹 <table> 時，若表格列較多或單元格內容較寬，導致表格寬度超過父容器，往往出現以下情況：

• 表格撐大容器，破壞頁面佈局；
• 或內容被截斷，無法查看完整數據；
• 表頭 (<th>) 與數據列 (<td>) 對齊錯亂。

解決方案：CSS 控制滾動

關鍵在於給父容器設置 overflow-x: auto，並確保表格不被壓縮：

.table-wrapper {
    width: 100%;
    overflow-x: auto;          /* 內容超寬時出現橫向滾動條 */
    -webkit-overflow-scrolling: touch; /* iOS 平滑滾動 */
}
.table-wrapper table {
    min-width: 100%;           /* 防止表格被壓縮小於容器 */
    white-space: nowrap;       /* 單元格內容不換行，由滾動條處理 */
    border-collapse: collapse;
}

HTML 結構：

<div class="table-wrapper">
    <table>
        <thead><tr><th>列1</th><th>列2</th>...</tr></thead>
        <tbody><tr><td>數據...</td>...</tr></tbody>
    </table>
</div>

進階：固定表頭（Sticky Header）

若需垂直滾動時表頭固定，可對 <th> 使用 position: sticky; top: 0;（現代瀏覽器支援）。

thead th {
    position: sticky;
    top: 0;
    background: #fff;         /* 避免滾動時內容透出 */
    z-index: 1;
}

常見坑點

1. 父容器未定寬：若外層 div 寬度為 auto 且無約束，表格不會觸發滾動。需確保父鏈路上有確定寬度（如 width: 100% 或具體像素）。
2. 表格被 table-layout: fixed 強制等寬：此屬性會讓列寬平均分配，導致長內容被截斷。去掉該屬性或改用 auto。
3. 邊框合併導致滾動條閃爍：設置 border-collapse: separate; border-spacing: 0; 可緩解。

總結

核心只需兩步：外層容器 overflow-x: auto + 表格 min-width: 100%。配合 sticky 表頭，即可獲得優雅的大數據表格瀏覽體驗。