0

I have a simple table layout as per below:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

And the following CSS:

table td:nth-child(1),
table tr:nth-child(1) {
  font-weight: bold;
}

The first column is bolded but the first row remains as normal text. I don't want to use headers as TinyMCE in Wordpress creates tables automatically in the above format so I'd rather just stick with that rather than then have to change the HTML.

Incidentally, the following does work so I assume there is no issue using "tr:nth-child(n)"

tbody tr:nth-child(odd) {
  background: #eee;
}

Would appreciate your help.

2
  • 2
    Sorry, this is generic CSS and are better asked over at Stack Overflow which deals specifically with these issues ;-) Sep 12, 2015 at 8:55
  • @PieterGoosen Styling the default TinyMCE table imo is in scope.
    – kaiser
    Sep 12, 2015 at 10:06

2 Answers 2

0

After much frustration I realised that the issue is the fact that you need ultimately to specify what you do with the cell in the nth row, hence the correct code is:

table td:nth-child(1),
table tr:nth-child(1) td {
  font-weight: bold;
}

Putting this up as the answer as there are a lot of sources that use the header to style the top row but don't stipulate what needs to be done if you have a table layout without a header.

-2
table:nth-child(1),
table tr:nth-child(1) {
  font-weight: bold;
}
2
  • 1
    Please clean up you code and explain what all of this means. Simply dumping code as an answer as just as useless as link only answers :-) Sep 12, 2015 at 8:56
  • The nth-child selector isn't supported in older browsers and might not work.
    – kaiser
    Sep 12, 2015 at 10:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.