A Table Mousehover Highlighting With Pure CSS

A table highlighting is a pure CSS solution that uses z-index and pre-creates the crosshair highlight effect on table columns and rows on mouseover.

css highlight table cell on hover, html table highlight selected row, highlight table row on hover, html table cell mouseover, html table highlight selected row on click

Create Amazing Web-Based Interactive Tables and Spreadsheets | jExcel

How to make use of it:

Suppose 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);
}

Crosshair Table Mousehover Highlighting, tableHighlight Plugin/Github