Highlighting rows and columns in tables can enhance readability and make your data presentation more interactive. In this article, we’ll explore how to achieve simple row and column highlighting with pure CSS, no JavaScript needed. This approach is lightweight and compatible with most modern browsers.

HTML Setup

Here’s a basic HTML table that we will style:

<table class="highlight-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      <td>Row 1, Col 2</td>
      <td>Row 1, Col 3</td>
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      <td>Row 2, Col 2</td>
      <td>Row 2, Col 3</td>
    </tr>
    <tr>
      <td>Row 3, Col 1</td>
      <td>Row 3, Col 2</td>
      <td>Row 3, Col 3</td>
    </tr>
  </tbody>
</table>

CSS for Row Highlighting

To highlight a row when the user hovers over it, we can use the :hover pseudo-class.

.highlight-table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
}

.highlight-table th, .highlight-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.highlight-table tbody tr:hover {
  background-color: #f2f2f2;
}

Explanation

  1. border-collapse: collapse; ensures there are no double borders.

  2. tbody tr:hover applies the highlight effect to the entire row when hovered.

  3. background-color: #f2f2f2; gives a subtle gray background to the row.

CSS for Column Highlighting

Highlighting a column is slightly trickier but still straightforward. We’ll use the :hover pseudo-class on the <td> or <th> elements.

.highlight-table td:hover,
.highlight-table th:hover {
  background-color: #dff0d8;
}

Explanation

  1. td:hover and th:hover target the table cells and headers during hover.

  2. background-color: #dff0d8; adds a greenish tint to indicate the hover state.

Combining Row and Column Highlighting

To combine row and column highlighting for an intuitive user experience:

.highlight-table tbody tr:hover {
  background-color: #f2f2f2;
}

.highlight-table td:hover,
.highlight-table th:hover {
  background-color: #dff0d8;
}

.highlight-table td:hover {
  outline: 2px solid #31708f;
  outline-offset: -2px;
}

Explanation

  1. Row and Column Highlights: Both effects work simultaneously.

  2. outline and outline-offset: Add a border around the hovered cell for better visibility.

Advanced Styling with CSS Grid

If your table content is structured with CSS Grid, you can achieve similar effects with grid-specific selectors:

.display-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.display-grid div {
  padding: 10px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
}

.display-grid div:hover {
  background-color: #ffebcd;
}

With just a few lines of CSS, you can significantly improve the usability and appearance of your tables. Highlighting rows and columns provides clear visual cues for your users without adding any JavaScript complexity. Use the examples above as a foundation to style your tables or adapt them for more advanced use cases.