The image I use (16x16)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áximo</th>
<th scope="col">Mí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;
}
CodePudding user response:
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>