CSS Highlight Table Row But Not When Hovering First 3 Cells

Issue

I would like to highlight a row (change the background color) when i hover over any cell excluding the first 3 cells on the row (button cells). I also need to exclude the first row from the grid as that is the header row. (Images show desired behavior)

I have tried using many different :hover css selectors. But i cant seem to find the combination that allows me to highlight the row when hovering over any cell except the first 3.

table tr:hover td {
  background-color: #e6e600;
}

<table>
 <tr>
  <th></th>
  <th></th>
  <th></th>
  <th>Name</th>
  <th>Age</th>
  <th>Gender</th>
 </tr>
 <tr>
  <td><button></button></td>
  <td><button></button></td>
  <td><button></button></td>
  <th>Joe</th>
  <th>37</th>
  <th>Male</th>
 </tr>
</table> 

Thanks!!

Solution

The 4^th, 5th^th, and 6^th columns were all <th>, the cells that are in the <tbody> should be <td>, so that is corrected. Also, I added a <thead> to it as well and an extra <tr> to show that the highlight affects each <tr> separately.

In order to meet the following criteria:

• no JavaScript
• valid HTML and CSS only
• the 4^th, 5th^th, and 6^th <td> of any <tr> within the <tbody> should all be highlighted at once if any one of them is hovered over.
• the 1^st, 2^nd, and 3^rd <td> of any <tr> within the <tbody> should never trigger any effects when hovering over them.

A sub-table could be used to isolate the last 3 columns:

• in the <tbody>, remove the last 2 <td> of each <tr>.
• add colspan="3" to the last <td> of each <tr> within the <tbody>
• add a <table> into each of those <td colspan="3">
• add a <tr> into that <table>
• add 3 <td> into that <tr>

Figure I - a sub-table

      <td class='col' colspan='3'>
        <table class='sub'>
          <tr><td>Joe</td><td>37</td><td>Male</td></tr>
        </table>
      </td>

table {
  table-layout: fixed;
  border-collapse: collapse;
}

th {
  width: 5%;
}

th:nth-of-type(4) {
  width: 50%;
}

th:nth-of-type(5) {
  width: 5%;
}

th:nth-of-type(6) {
  width: 15%;
}

td {
  border: 1px solid #000;
  background: transparent;
  text-align:center;
}

.col {
  padding: 0;
  border: 0;
  outline: 1px solid #000;
  outline-offset: 0;
}

.sub tr:hover td {
  background: #fc0;
}

.sub {
  table-layout: fixed;
  border-collapse: collapse;
  min-width: 100%;
  padding: 0;
  border: 0.5px solid #000;
}

.sub td {
  padding: 5px;
  border: 1px solid 0.5px;
  text-align: left;
}

.sub td:first-of-type {
  width: 70%;
  border-left: 0;
}

.sub td:nth-of-type(2) {
  width: 10%;
  text-align: center;
}

.sub td:last-of-type {
  width: 20%;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button>A</button></td>
      <td><button>B</button></td>
      <td><button>C</button></td>
      <td class='col' colspan='3'>
        <table class='sub'>
          <tr><td>Joe</td><td>37</td><td>Male</td></tr>
        </table>
      </td>
    </tr>
    <tr>
      <td><button>A</button></td>
      <td><button>B</button></td>
      <td><button>C</button></td>
      <td class='col' colspan='3'>
        <table class='sub'>
          <tr><td>Jill</td><td>37</td><td>Female</td></tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answered By - zer00ne