Crosshair Table Mousehover Highlighting In Pure CSS

Preview:

Description:

A pure CSS solution that uses z-index and :before to create a Crosshair highlighting effect on table columns and rows on mouse hover.

How to use it:

Suppose that you have an html table with several columns and rows:

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
      <td>cell 6</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
      <td>cell 6</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
      <td>cell 6</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
      <td>cell 6</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
      <td>cell 6</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
      <td>cell 6</td>
    </tr>
  </tbody>
</table>

Apply the crosshair highlighting effect to table cells.

tbody tr:hover { background-color: rgba(255,255,255,0.3); }
tbody td:hover:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9999px;
  bottom: -9999px;
  z-index: -1;
  background-color: rgba(255,255,255,0.2);
}