← All elements
<table class="pc-col">
<thead>
<tr><th>Zone</th><th>Standard</th><th>Express</th><th>Same day</th></tr>
</thead>
<tbody>
<tr><td>Metro Manila</td><td>₱99</td><td>₱149</td><td>₱249</td></tr>
<tr><td>Luzon</td><td>₱149</td><td>₱229</td><td>–</td></tr>
<tr><td>Visayas</td><td>₱179</td><td>₱259</td><td>–</td></tr>
<tr><td>Mindanao</td><td>₱199</td><td>₱289</td><td>–</td></tr>
</tbody>
</table>About this table
A rates table that tints the whole column under the pointer by checking cell position with :has() and :nth-child().
How it works
Plain tables only highlight a row. Here the table checks with :has() whether a cell in a given column position is hovered, and if so tints every cell in that same position, which highlights the whole column. The :nth-child selectors choose the column, so no script or extra classes are needed.
Ways to customise it
- Change #ebe8ff to the highlight colour you want.
- Add a selector line with nth-child(5) for a fifth column.
- Remove the transition for an instant tint.
Good to know
Hover is not available on touch screens, so treat the highlight as a bonus and keep the table readable without it. :has() works in all current browsers, and the table stays fully usable where it is not supported.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.