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.

  • 1
    Sorry, this is generic CSS and are better asked over at Stack Overflow which deals specifically with these issues ;-) – Pieter Goosen Sep 12 '15 at 8:55
  • @PieterGoosen Styling the default TinyMCE table imo is in scope. – kaiser Sep 12 '15 at 10:06
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;
}
  • 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 :-) – Pieter Goosen Sep 12 '15 at 8:56
  • The nth-child selector isn't supported in older browsers and might not work. – kaiser Sep 12 '15 at 10:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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