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 can do this with background-image and gradient:

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


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

  

    
cell
    
cell
  
  

    
cell
    
cell
  

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;
}
/**/

  

    
cell
    
cell
  
  

    
cell
    
cell