Can I use `col`, `colgroup`, and CSS `:hover` to highlight more than just a single table cell?

Can col, colgroups and the css "hover" pseudoclass be used for more than just a single cell?

To highlight table rows and columns on mouse hover, CSS pseudo-classes like ":hover" can be used. But what if you want to highlight not just a single cell, but an entire row or column, including the headers?

A pure CSS solution can achieve this using the ::before and ::after pseudo-elements. These elements add content before and after the selected element, respectively. Here's how:

1. Create Highlight Elements:

   • Add ::before for row highlighting and ::after for column highlighting after the relevant elements (e.g., tr, td, th).
   • Use absolute positioning to allow these elements to extend anywhere.
   • Position them outside the element's bounds using negative values for left/top (::before) or left/bottom (::after).
   • Set a larger width/height to cover the entire row/column.

2. Hide Highlight Overflow:

   • Prevent the highlight elements from overflowing the table by setting overflow: hidden on the table.
   • This keeps the table area clean while ensuring the highlight extends beyond individual cells.

3. Add Row/Column Selectors:

   • To highlight only the current row or column, use the ::before and ::after elements on :hover th (headers) and :hover .row / .col (class-based selectors for rows/columns).

The CSS code below implements these principles:

table { overflow: hidden; }
td, th, .row, .col { cursor: pointer; padding: 10px; position: relative; }
td:hover::before, .row:hover::before { background-color: #FFA; content: '<pre class="brush:php;toolbar:false"><table>
  <tr>
    <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
  </tr>
  <tr class="row">
    <th class="row">160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
  </tr>
  <tr class="row">
    <th class="row">165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
  </tr>
</table>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #FFA; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

The HTML remains largely unchanged, but includes class names for rows and columns:

This solution works in modern browsers, extending the hover highlight effect to entire rows and columns elegantly.

The above is the detailed content of Can I use `col`, `colgroup`, and CSS `:hover` to highlight more than just a single table cell?. For more information, please follow other related articles on the PHP Chinese website!