Insert image in table and do not move text inside of it

November 14, 2022

The image I use (16×16)I am trying to insert the image into second TR>FirstTH but the text I had already in the th just dessapears. I already tryied float,position properties and adjusting the width and height of table, but still doesn’t work. You can’t change the HTML, it’s the exercise requirement.

HTML

<body>
<table border="1" summary="Tipos de cambio">
    <tr>
        <th scope="col">Cambio</th>
        <th scope="col">Compra</th>
        <th scope="col">Venta</th>
        <th scope="col">M&aacute;ximo</th>
        <th scope="col">M&iacute;nimo</th>
    </tr>
    <tr>
        <th scope="row">Euro/Dolar</th>
        <td>1.2524</td>
        <td>1.2527</td>
        <td>1.2539</td>
        <td>1.2488</td>
    </tr>
    <tr>
        <th scope="row">Dolar/Yen</th>
        <td>119.01</td>
        <td>119.05</td>
        <td>119.82</td>
        <td>119.82</td>
    </tr>
    <tr>
        <th scope="row">Libra/Dolar</th>
        <td>1.8606</td>
        <td>1.8611</td>
        <td>1.8651</td>
        <td>1.8522</td>
    </tr>
    <tr>
        <th scope="row">Euro/Yen</th>
        <td>149.09</td>
        <td>149.13</td>
        <td>149.79</td>
        <td>148.96</td>
    </tr>
</table>

</body>
</html>

CSS

table{
    text-align: center;
    border-collapse: collapse;
    border: 1px solid black;
    font-family: Arial;

}


tr:nth-child(even)>td,th{
    background-color: #FFFFCC;
}

th{
    background-color: rgba(88, 88, 88, 0.2);
}

tr:nth-child(n+2)>th{
    background-color:#E6F3FF;

}

/*This is the issue in the code*/

tr:nth-child(2) th:first-child{
    content: url("imagenes/euro.png");
    border: 0;
    background-repeat: no-repeat;
    background-position: left;
}

>Solution :

use the before to insert the image

  <style>
        table {
            text-align: center;
            border-collapse: collapse;
            border: 1px solid black;
            font-family: Arial;

        }


        tr:nth-child(even)>td,
        th {
            background-color: #FFFFCC;
        }

        th {
            background-color: rgba(88, 88, 88, 0.2);
        }

        tr:nth-child(n+2)>th {
            background-color: #E6F3FF;

        }

        /*This is the issue in the code*/

        tr:nth-child(2) th:first-child:before{
            content: url("https://i.stack.imgur.com/r9nO9.png");
            border: 0;
            background-repeat: no-repeat;
            background-position: left;
        }
    </style>