How to Highlight Rows and Columns in a Table on Hover Using CSS?

Highlighting Rows and Columns in a Table on Hover Using CSS

In this question, the user aims to highlight both a row and column on hover in an HTML table. They want the highlight to extend from one axis to the other, intersecting at the hovered cell.

CSS Solution

Here's a pure CSS solution that achieves the desired effect:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

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 class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</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; }

Explanation

This CSS uses a combination of pseudo-elements, absolute positioning, and z-indexing to create the desired effect.

• The ::before and ::after pseudo-elements create invisible boxes before and after the target elements (rows and columns).
• Absolute positioning allows these boxes to extend beyond the confines of their parent elements.
• Setting z-index to -1 ensures that these boxes are below the actual table cells, preventing them from interfering with user interactions.

HTML

The corresponding HTML markup is as follows:

In this markup, the .row and .col classes are added to the table header elements to distinguish them from regular rows and columns, allowing for different styling if desired.

This solution offers a flexible approach to highlighting table rows and columns on hover, without the need for JavaScript or any external libraries.

The above is the detailed content of How to Highlight Rows and Columns in a Table on Hover Using CSS?. For more information, please follow other related articles on the PHP Chinese website!