Without javascript, you need to highlight the row and column in the table with striped markings, preserving the borders of the cells.

What is (Chrome):
HTML:

<table class="table"> <thead> <tr class="table__row table__row_header"> <th class="table__cell table__cell_header">title 1</th> ... </tr> </thead> <tbody> <tr class="table__row table__row_body"> <td class="table__cell table__cell_body"> <span class="table__content">text 11</span> </td> <td class="table__cell table__cell_body"> <span class="table__content">text 12</span> </td> <td class="table__cell table__cell_body"> <div class="table__content">text 13</div> </td> <td class="table__cell table__cell_body"> <div class="table__content">text 14</div> </td> ... </tr> ... </tbody> </table>

CSS:

 .table { overflow: hidden; width: 80%; margin: 5px auto 5px auto; font-size: 16px; cursor: default; } .table__row { position: relative; } .table__row_body:nth-child(even) { background-color: darkgrey; } .table__row_body:nth-child(odd) { background-color: lightgrey; } .table__cell { position: relative; padding: 10px; border: 10px solid cadetblue; border-collapse: collapse; } .table__cell_header { z-index: 20; background-color: darkslategrey; color: white; } .table__cell_body:hover:after { position: absolute; z-index: 10; top: -5000px; left: 0; width: 100%; height: 10000px; content: ""; background-color: lightyellow; } .table__row_body:hover .table__cell_body { background-color: lightgoldenrodyellow; } .table__content { position: relative; z-index: 20; }

What I want to get:

Source

  • In IE11, there are borders like in the picture, but in FF39 they are not observed at all. I'm talking about the bottom screen. - Visman
  • I confirm, in FF, it looks like dropbox.com/s/9d3oicbcnhz02b5/… - toxxxa

2 answers 2

Alternatively, you can make a background-image , and repit it in Y instead of background-color: lightyellow; for .table__cell_body: hover: after . But then there will be a fixed cell height.

    I found the solution to use a color close to the border color in the backlight and make it more transparent:

     background-color: rgba(95,158,160,.5);

    instead

     background-color: lightyellow; background-color: lightgoldenrodyellow;

    Result