Press "Enter" to skip to content

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


See Demo And Download

Official Website(xiao-jing): Click Here

This superior jQuery/javascript plugin is developed by xiao-jing. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.