CSS for Table Rows and Columns

Question

CSS for Table Rows and Columns

Gecko Boy

2022年4月20日 04:05

I have a simple table layout as per below:

table
  tr
    td1/td
    td2/td
  /tr
  tr
    td3/td
    td4/td
  /tr
  tr
    td5/td
    td6/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.

Topic table Wordpress

Category Web

Gecko Boy · Accepted Answer · 2015年9月13日 00:19

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.

Tom Berghuis · Accepted Answer · 2015年9月12日 09:27

1

Tom Berghuis answered at 2015年9月12日 09:27

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

CSS for Table Rows and Columns

About