CSS trick for rowspan and nth-child matching

If ever you try to make a table with a single <td> matching more than one line using rowspan, your css that was using nth-child to customize each column is working badly. Only the first line of each rowspan is correctly recognized by the nth-child. All other lines are all shifted by one.

That’s because the css engine is not taking in accound the rowspan attribute.


In my case it was to add all the <td> hidden by the rowspan like <td style=”display:none”> so they are here for the css engine to count properly, but not displayed at all.