0

I've used alternate table row shading before (using the ::nth-child selector), but I noticed it can't get the job done when you have irregular table structure. I've come across one specific case for which I'd like to come up with a solution.

In the picture below, you can see that the rows are styled with ::nth-child(even) to give every other row a background color:

foobar table rows

The problem here is that in some cases, the first column cell spans two rows, causing the rest of the cells in that "row" (which is really two rows) to appear disjointed or misaligned. The cells in the rows spanned by "Cole" should have the same background color as the first column's cell, because the following columns are all related to the first one. Is this achievable using strictly CSS?

I would just change the structure of the table, but the people entering this content are using a CMS with a built-in text editor, and they have no control over the format. I'd have to manually change every table on their site, which would be a huge undertaking (and it wouldn't account for future tables).

user3281385
  • 121
  • 1
  • 6
  • 1
    I think this question is identical to yours: http://stackoverflow.com/questions/10200997/how-to-use-nth-child-for-styling-with-a-table-with-rowspan – Marc Nov 23 '15 at 15:24
  • Hmm, yes. I remember seeing that question but I didn't read it because it specifically asks about nth-child. The answer does answer my question though. Thanks for pointing me in the right direction. – user3281385 Nov 24 '15 at 17:37

0 Answers0