要將表格中的某一行 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 設定
- 由於我們會設定一個超過表格高度的偽元素，所以先為這個表格設定溢出隱藏 overflow:hidden。
- 把每個欄位的 position 設為 relative。
- 設定每一行 hover 的背景色。
- 紅色的部分是關鍵，它先 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.
