I'm currently working on a table with two cells in each row just for fun. For the first row, I want both cells to display the same picture. To achieve this, I wrote the following CSS:
tr:nth-child(1){
background-image:url("cat.jpg");
background-size:cover;
border-radius:10px;
}
My HTML code is as follows:
<tr>
<td>Ruta 1</td>
<td>Ruta 2</td>
</tr>
<tr>
<td>Ruta 3</td>
<td>Ruta 4</td>
</tr>
In Google Chrome, everything displays as expected with the same picture in each cell. However, when I switch to Firefox, the same picture appears across both cells of the first row.
You can see screenshots of how it looks on Google Chrome, and Firefox.
If anyone has any insights or suggestions on how I can adjust my CSS to ensure consistency between browsers, I would greatly appreciate it. Thank you in advance!