CSS for Table Rows and Columns

Question

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.

Answer 1

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.

Answer 2

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