0

For fun, I am doing a table with two cells in each row. And I want the cells in the first row to have the same picture, so I wrote in CSS:

tr:nth-child(1){ background-image:url("cat.jpg"); background-size:cover; border-radius:10px; }

And my HTML code looks like this:

<tr> <td>Ruta 1</td> <td>Ruta 2</td> </tr> <tr> <td>Ruta 3</td> <td>Ruta 4</td> </tr>

So, you should have the same picture on each cell, which I have in Google Chrome. But when I use this in Firefox, I get the same picture over two cells.

Google Chrome, and Firefox.

Any clue of what this is about? Can I write something in my CSS do make it work for Firefox. thanks in advance!

Improve this question
3
  • Sätt bakgrunden på cellen td, inte på raden tr ... :) Commented Sep 24, 2016 at 17:50
  • Om jag skriver td:nth-child(1) så får jag den på de första cellerna i varje rad, vilket inte var min tanke. Ville ha samma bild på samma rad, olika bilder på varje rad. Däremot så funkar tr:nth-child(1) td{} bäst. Commented Sep 24, 2016 at 17:53
  • Japp, så ska du göra. tr:nth-child(1) betyder inte att du sätter värden på cellerna td, det betyder att du menar första tr Commented Sep 24, 2016 at 17:59

2 Answers 2

Reset to default
1

Apply background to cells - <td> and not to rows - <tr>.

tr:nth-child(1) td { background-image:url("cat.jpg"); background-size:cover; border-radius:10px; }

You want each cell to have its own picture, not each row.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

In firefox don't set background-image or color in tr, It will make problems. Instead add to td.

tr:nth-child(1) td{background-image:url("cat.jpg");}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.