CSS background image no-repeat only working in Firefox

Question

.myclass{
  background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg');
  background-repeat: no-repeat;
  background-size:contain;
  background-position: 1.5%;

}

All my rows (tr) of the table have the class myclass: <tr class="myclass"> In Firefox the image is only displayed in all cells of the first column of the table but in chrome and opera all cells of table have this background image. What to do to make sure it shows only in the first column in chrome and opera as well?

Here is the html:

<table>
  <tr class="myclass">
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr class="myclass">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

Answer 1

Set it up like this

.myclass td:first-child {
  background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg');
  background-repeat: no-repeat;
  background-size:contain;
  background-position: 1.5%;
}

http://codepen.io/brianmtreese/pen/XKwvqX

Answer 2

Add .myclass only first th & td

 .myclass{ background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg'); background-repeat: no-repeat; background-size:contain; background-position: 1.5%; } 

 <table> <tr > <th class="myclass">Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td class="myclass">Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </table>