Add background color to an HTML table cell without using background-color?

Question

Is there a way to add (background) color to a table cell other than the background-color style attribute? I have tables with programmatically generated textual content and backg

Answer 1

You could use an inset box-shadow to cover your background

td {
  background: red;
  padding: 1em;
}

td:hover, .highlight {
  box-shadow: inset 0 0 0 50px yellow;
}
td.highlight:hover  {/* ? needed ? */
  box-shadow: inset 0 0 0 50px green;
}

<table>
  <tr>
    <td>
      cell to hover
    </td>
    <td>
      cell to hover
    </td>
    <td class="highlight">
      cell to highlight
    </td>
  </tr>
</table>

Answer 2

You can do this with background-image and gradient:

td {
  padding: 20px;
  background-color: grey;
}


/* your code */
td:hover {
  background-image:linear-gradient(red,red);
}
/**/

<table>
  <tr>
    <td>cell</td>
    <td style="background-color:#ffffd!important">cell</td>
  </tr>
  <tr>
    <td style="background-color:#f3f3f3">cell</td>
    <td>cell</td>
  </tr>
</table>

A pseudo element can also do the job:

td {
  padding: 20px;
  background-color: grey;
}


/* your code */
td {
  position:relative;
  z-index:0;
} 
td:hover::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:red;
}
/**/

<table>
  <tr>
    <td>cell</td>
    <td style="background-color:#ffffd!important">cell</td>
  </tr>
  <tr>
    <td style="background-color:#f3f3f3">cell</td>
    <td>cell</td>
  </tr>
</table>