CSS for Table Rows and Columns

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.

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.

• table

Share Improve this question asked Sep 12, 2015 at 3:29 Gecko BoyGecko Boy 6511 silver badge1010 bronze badges 2

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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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.

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