如何讓表格中的行及列同時 Highlight?

要將表格中的某一行 Highlight 起來很容易,你只要 tr:hover{background:yellow;} 就可以完成。但,如果你想同時 Highlight 行及列的時候,麻煩就會出現,因為在現有的 HTML & CSS 中,沒有針對「列」的設定。對於這個問題 MATT WALTON 提出一個解決的方式。

訣竅:將欄位設定一組超高的偽元素,並 overflow:hidden 整個表格。

他的基本原理是透過 :hover 選定某個表格的欄位,然後透過偽元素 ::after 或 ::before,將這個欄位創造出一個超高的背景色,最後把 table 的溢出設為隱藏 overflow:hidden,藉此模擬出 Highlighting 表格「列」的效果。

在了解它的運作原理後,下面我們實作看看。

Table 的部分

<table>
    <tr>
        <th></th>
        <th>50kg</th>
        <th>55kg</th>
        <th>60kg</th>
        <th>65kg</th>
        <th>70kg</th>
    </tr>
    <tr>
        <th>160cm</th>
        <td>大毛</td><td>二毛</td><td>三毛</td><td>四毛</td><td>五毛</td>
    </tr>
    <tr>
        <th>165cm</th>
        <td>孫大哥</td><td>孫二哥</td><td>孫三哥</td><td>孫四哥</td><td>孫小弟</td>
    </tr>
    <tr>
        <th>170cm</th>
        <td>小王</td><td>老李</td><td>陳仔</td><td>陳浩南</td><td>雞哥</td>
    </tr>
    <tr>
        <th>175cm</th>
        <td>豬哥亮</td><td>謝金燕</td><td>周杰倫</td><td>蔡依林</td><td>寶傑哥</td>
    </tr>
</table>

CSS 的部分

<style>
table {
    overflow: hidden;
    border-collapse:collapse;
}

td, th {
    position: relative;
}

tr:hover{background:red;}

td:hover::after{
    background-color: green;
    content: '';
    width: 100%;
    height: 10000px;
    position: absolute;
    top: -5000px;
    left: 0;
    z-index: -1;
}
</style>

簡單的說明 CSS 設定

  1. 由於我們會設定一個超過表格高度的偽元素,所以先為這個表格設定溢出隱藏 overflow:hidden。
  2. 把每個欄位的 position 設為 relative。
  3. 設定每一行 hover 的背景色。
  4. 紅色的部分是關鍵,它先 hover 某個欄位,並將這個欄位透過偽元素 ::after 產生綠色的背景,然後把這個偽元素的 position 設為 absolute,width 設為 100%,讓他可以依欄位寬的需要自動調整。height 則設為 10000px (一定要遠遠大於表格的高度),left 則設定 height 約一半的數值 (負值),讓這個偽元素的垂直位置約掉在中間的地方;最後,z-index 需設為 -1,讓這個偽元素可以落在表格之下。

PS 萬. 為了辨識效果,我們把行及列的背景色設成兩組不同的顏色。
PS 吐. 這個表格不能套在任何有背景的元素裡,否則偽元素會在任何元素的背景之下,因為我們把它的 z-index 設為 -1。

手機或平板呢?

由於手機及平板不支援 hover 的關係,上面的方式在手機及平板的觸控環境中無法使用,只能用在桌面的環境下,使用相對受限;對此,CSS-Tricks 用 jQuery 解決這個問題,完整的範例可以看這邊

See the Pen Row and Column Highlighting with CSS Only by Chris Coyier (@chriscoyier) on CodePen.

延伸閱讀:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料