Inserting an icon on the left of table cell-CodePudding

I've a simple table cell and trying to add an icon on the left of each th cell using ::before. My codepen here: https://codepen.io/Chiz/pen/RwQXKGG

HTML:

<table>
  <tr>
    <th>ROW 1<th>
    <td>ROW 1 DATA</td>
  </tr>
</table>

CSS:

body
{
  background-color:black;
  color:white;
}

table
{
  border-collapse:collapse;
  width:80%;
}

tr
{
  background-color:rgb(255,255,255,0.2);
  height:100px;
  position:relative;
}


th::before
{
    content: '';
  background: url(https://i.postimg.cc/Vr6wPqQ2/car1.png) no-repeat;
  position: absolute;
    left:0px;
  top:0px;
  height: 24px;
  width: 24px;
}

The icon shows up but looks cut-off though. I've also tried the float:left method but it doesn't work. I could add a narrow column on the left of the table and put the icon there, but in the real case (this codepen is only to isolate the issue), it's a Wordpress site and I'm trying to use CSS to customize the plugin's look, without going into the plugin file to adjust the CSS/PHP.

CodePudding user response：

Actually the issue with background size. you have used icon as background image so you have to put size of background as well. so the solution would be background-size: contain;

th::before
{
  content: '';
  background: url(https://i.postimg.cc/Vr6wPqQ2/car1.png) no-repeat;
  position: absolute;
  left:0px;
  top:0px;
  height: 24px;
  width: 24px;
  background-size: contain; /*New added*/
}