Add style to the whole column of the table

Solution for Add style to the whole column of the table
is Given Below:

I am working with a (10X3) table on the HTML page. And in the heading of the table, any one of the column header (not pre-decided so I can’t use the column number, it could be any column) contains a CSS class named “preferred”. In these case, is there any way in which I can add style to the whole column whose contains the “preferred” class?

enter image description here

Thanks in advance.

This is how the code looks like.

<table>
<thead>
  <tr>
    <th></th>
    <th></th>
    <th class="preferred"></th> <!-- style should be applied here -->
  </tr>
</thead>
<tbody>
  <tr>
    <td></td>
    <td></td>
    <td></td> <!-- style should be applied here -->
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td><!-- style should be applied here -->
  </tr>
</tbody>
</table>

You could use pseudo-selectors:

td, tr {
  padding: 5px 10px;
}

:where(td,th):last-child {
  background: lightblue;
}
<html>
<head></head>
<body>
<table>
  <tr>
    <th> Test 1 </th>
    <th> Test 2 </th>
    <th> Test 3 </th>
    
  </tr>
  <tr>
    <td> data </td>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <td> data </td>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <td> data </td>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <td> data </td>
    <td> data </td>
    <td> data </td>
  </tr>
</table>
</body>
</html>

Edit:

Since you don’t know what column it will be on, you’ll be needing some JS. This is assuming only one column will need to be highlighted

const thList = document.querySelectorAll('th');
let colNumber = 0;
for (let i=0; i<thList.length; i++) {
  if (thList[i].classList.contains('preferred')) {
    colNumber = i + 1;
    break;
  }
}

const targetList = document.querySelectorAll(`tr > td:nth-child(${colNumber})`)

targetList.forEach(cell => {
  cell.classList.add('preferred')
})

    
td, th {
  padding: 5px 10px;
}

.preferred {
  background: lightgreen;
}
<html>
    <head></head>
    <body>
    <table>
      <tr>
        <th> Test 1 </th>
        <th> Test 2 </th>
        <th class="preferred"> Test 3 </th>
        
      </tr>
      <tr>
        <td> data </td>
        <td> data </td>
        <td> data </td>
      </tr>
      <tr>
        <td> data </td>
        <td> data </td>
        <td> data </td>
      </tr>
      <tr>
        <td> data </td>
        <td> data </td>
        <td> data </td>
      </tr>
      <tr>
        <td> data </td>
        <td> data </td>
        <td> data </td>
      </tr>
    </table>
    </body>
    </html>

Edit 2:

Here is the updated JS to make this code work for multiple columns:

const thList = document.querySelectorAll('th');
let colNumber = [];
let targetList;
for (let i=0; i<thList.length; i++) {
  if (thList[i].classList.contains('preferred')) {
    targetList = document.querySelectorAll(`tr > td:nth-child(${i+1})`)
  }
  targetList.forEach(cell => {
    cell.classList.add('preferred')
  }) 
}

To get the index of a specific TH with class "preferred" you could use a simple function like:

const getPreferredColIndex = (EL) => {
  const THs = EL.querySelectorAll("thead th");
  return [...THs].findIndex(TH => TH.classList.contains("preferred"));
};

Having that index you could than create another function that highlights the column:

const makeColPreferred = (EL, i) => {
  if (i === undefined) i = getPreferredColIndex(EL);
  const PR = EL.querySelectorAll(".preferred");
  PR.forEach(EL => EL.classList.remove("preferred")); // Remove from all
  EL.querySelectorAll(`th:nth-child(${i+1}), td:nth-child(${i+1})`).forEach(EL => EL.classList.add("preferred"));
};

Finally you could use that latter like:

// Will automatically detect the preferred based on TH with class "preferred"
makeColPreferred(myTable); 

Or even if you want to manually set / change (like on CLICK) to another one use:

// Dynamically change to another column index:
makeColPreferred(myTable, 0); // will make col index 0 preferred
makeColPreferred(myTable, 1); // will make col index 1 preferred
// You got the point

Example:

const getPreferredColIndex = (EL) => {
  const THs = EL.querySelectorAll("thead th");
  return [...THs].findIndex(TH => TH.classList.contains("preferred"));
};

const makeColPreferred = (EL, i) => {
  if (i === undefined) i = getPreferredColIndex(EL);
  const PR = EL.querySelectorAll(".preferred");
  PR.forEach(EL => EL.classList.remove("preferred")); // Remove from all
  EL.querySelectorAll(`th:nth-child(${i+1}), td:nth-child(${i+1})`).forEach(EL => EL.classList.add("preferred"));
};

const TABLE = document.querySelector("table"); // PS: be more specific than "table"!
makeColPreferred(TABLE);
// makeColPreferred(TABLE, 1); // Specifically set to index 1
.preferred {background: #ffe59a;}
<table>
  <thead>
    <tr>
      <th>th1</th>
      <th>th2</th>
      <th class="preferred">th3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td1</td>
      <td>td2</td>
      <td>td3</td>
    </tr>
    <tr>
      <td>td1</td>
      <td>td2</td>
      <td>td3</td>
    </tr>
  </tbody>
</table>

You can try the :nth-child pseudo class. You’ll need to use some JS to get the index of the column:

const column = document.querySelector('.preferred')
const index = Array.prototype.indexOf.call(column.parentNode.querySelectorAll('th'), column);
document.head.innerHTML+=`<style>td:nth-child(${index+1}), .preferred{background-color:green;}`;
<html>
<head></head>
<body>
<table>
  <tr>
    <th> Test 1 </th>
    <th> Test 2 </th>
    <th class="preferred"> Test 3 </th>
    
  </tr>
  <tr>
    <td> data </td>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <td> data </td>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <td> data </td>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <td> data </td>
    <td> data </td>
    <td> data </td>
  </tr>
</table>
</body>
</html>