HTML 表格合併儲存格 (rowspan) 後 hover 效果失效的解決方案

問題現象

表格使用 rowspan 垂直合併儲存格，給 <table> 加 :hover 或 Bootstrap table-hover 類，發現合併儲存格所在行之外的行懸停時，合併儲存格不跟隨高亮。

原因分析

CSS tr:hover td 只會高亮**同一行**的 td。合併儲存格（rowspan="3"）實際屬於第一行，後續兩行**沒有對應的 td**，自然無法被 tr:hover 選中高亮。

解決方案

方案一：JavaScript 綁定行懸停事件手動高亮合併儲存格（推薦）

// 原生 JS
document.querySelectorAll('table tbody tr').forEach(tr => {
    tr.addEventListener('mouseenter', () => {
        // 找到所有 rowspan > 1 且屬於這一行「邏輯上」的儲存格
        document.querySelectorAll('td[rowspan]').forEach(td => {
            const startRow = td.closest('tr').rowIndex;
            const span = parseInt(td.getAttribute('rowspan'), 10);
            const currentRow = tr.rowIndex;
            if (currentRow >= startRow && currentRow < startRow + span) {
                td.classList.add('hover-highlight');
            }
        });
    });
    tr.addEventListener('mouseleave', () => {
        document.querySelectorAll('td.hover-highlight').forEach(td => td.classList.remove('hover-highlight'));
    });
});

CSS：

.hover-highlight { background-color: #f5f5f5 !important; }

方案二：CSS 偽類 + 鄰居選擇器（有限支援）

若合併儲存格**固定在第一列**，且結構規律，可嘗試：

tbody tr:hover td:first-child,
tbody tr:hover ~ tr td:first-child:only-of-type { /* 極其脆弱，不推薦生產 */ }

方案三：重新設計表格結構（避免 rowspan）

• 將合併內容拆分為多行重複數據，用 visibility: hidden 隱藏重複視覺，但 DOM 保留，tr:hover 自然生效。
• 或使用 display: grid / Flex 布局模擬表格，完全控制高亮邏輯。

最佳實踐建議

1. 優先用 **方案一 (JS 手動同步高亮)**，邏輯清晰、兼容所有瀏覽器、不改動 HTML 結構。
2. 若表格極大（>1000 行），使用**事件委託**綁定在 tbody 上，配合 td[rowspan] 預計算映射關係，避免逐行綁定事件。
3. 考慮無障礙：高亮色對比度需符合 WCAG AA 標準。

總結

rowspan 導致合併儲存格不屬於後續行 DOM，CSS tr:hover 無法覆蓋。**用 JavaScript 監聽行懸停，根據 rowspan 計算邏輯歸屬，手動為合併儲存格添加/移除高亮類** 是最通用、穩健的解決方案。