apply CSS to a specific column in a table

Question

apply CSS to a specific column in a table

I have a table created in the specific layout provided below:

<thead>
  <th></th>
  <th></th>
  <th></th>
</thead>

<tbody>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody>

My goal is to highlight an entire column when its header is hovered over. For example, if I hover over the second <th> from, let's say making it blue, then the corresponding second <td> in every <tr> will be highlighted in yellow as a column. I've attempted various methods but so far have only been successful in highlighting the header and not the entire column. I would like to maintain the structure within a table format. Can anyone provide assistance with this?

html css sass react-bootstrap-table

Answer 1

Answer №1

Here is an example of how you can achieve this:

<table>
<thead>
  <th>Header 1</th>
  <th>Header 2</th>
  <th>Header 3</th>
</thead>

<tbody>
  <tr>
    <td>Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
    <td>Row 1 Cell 3</td>
  </tr>
  <tr>
    <td>Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
    <td>Row 2 Cell 3</td>
  </tr>
  <tr>
    <td>Row 3 Cell 1</td>
    <td>Row 3 Cell 2</td>
    <td>Row 3 Cell 3</td>
  </tr>
</tbody>
  </table>

Additionally, include the following CSS:

table {
  overflow: hidden;
}


td, th {
  position: relative;
}
th:hover {background-color:blue;}

th:hover::after {
  content: "";
  position: absolute;
  background-color: grey;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

Answer 2

Here is an example of how you can achieve this:

<table>
<thead>
  <th>Header 1</th>
  <th>Header 2</th>
  <th>Header 3</th>
</thead>

<tbody>
  <tr>
    <td>Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
    <td>Row 1 Cell 3</td>
  </tr>
  <tr>
    <td>Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
    <td>Row 2 Cell 3</td>
  </tr>
  <tr>
    <td>Row 3 Cell 1</td>
    <td>Row 3 Cell 2</td>
    <td>Row 3 Cell 3</td>
  </tr>
</tbody>
  </table>

Additionally, include the following CSS:

table {
  overflow: hidden;
}


td, th {
  position: relative;
}
th:hover {background-color:blue;}

th:hover::after {
  content: "";
  position: absolute;
  background-color: grey;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

apply CSS to a specific column in a table

Answer №1

Similar questions

Customizing the tab content background color in MaterializeCSS

ng-html-bind for a label with a checkbox

Transferring information from ng-Dialog HTML to a controller

Navigating the waters of adding a CSS property to a jQuery variable pseudo selector

Having trouble connecting the HTML file with the JavaScript file

When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

What sets XHTML 1.1 apart from other document types?

Prevent the repositioning of a tooltip due to overflow in Bootstrap 5.2 and Popper JS Tooltips

What is the best way to implement CSS properties on Material UI components?

Align elements to the left and right using Flexbox

Sketch lines within the accordion

The binding between the model and the AngularJs ng-options on an HTML select element is not functioning

What CSS style should be used to fill both the thumbs up and thumbs down icons of a glyphicon?

Activate the Submission Button Once Validation is Complete

What is causing the issue with using classes in Javascript to clear the form?

"Create a stunning backdrop with animated wave effects using JavaScript

Is the :root selector truly devoid of value?

The issue of a non-functional grid with scroll in a flexbox

How can CSS incorporate the color of a different class?

Switching up icons using React Spring - a step-by-step guide!