padding in selected cells

[slingsrat]

I'm trying to add padding to every third cell

 

tr:nth-child(3n+2) {font-family: Arial; font-size: 10pt; padding: 10px; background-color: #0099ff; color: white}
tr:nth-child(3n) {color: white; text-align: right; font-size: 8pt}
th{font-family: Arial}

The first line of code works apart from the padding attribute. How to pad selected cell?

[davej]

What is in the cell?

[Ingolme]

The selectors you're showing apply to <tr> elements, which are rows, not cells. If you want to target cells you need to select <td> and <th> elements.

 

Table cells have their own behavior when being rendered:

• The width of a cell, including padding and borders, is the same as the width of all other cells in its column
• The height of a cell, incuding padding and borders, is the same for every cell in one same row.
• Cells take up as much horizontal space as necessary to fill up the width of the table they're in

[slingsrat]

What is in the cell?

Just text

[slingsrat]

 

The selectors you're showing apply to <tr> elements, which are rows, not cells. If you want to target cells you need to select <td> and <th> elements.

 

Table cells have their own behavior when being rendered:

• The width of a cell, including padding and borders, is the same as the width of all other cells in its column
• The height of a cell, including padding and borders, is the same for every cell in one same row.
• Cells take up as much horizontal space as necessary to fill up the width of the table they're in

 

I can use <td style="padding:5px"> at the start of every cell I want padded. I was looking for a single entry in a style sheet to do it.

[dsonesuk]

'I'm trying to add padding to every third cell'

 

Like mentioned you are not targeting the cells but the tr, YOU are targeting EVERY THIRD tr element, which makes your statement that everything works confusing? because to 'target every third cell' you would need to use

 

td:nth-child(3n+2)

 

But! If it works except padding, what you really need is EVERY third tr element row cells

 

tr:nth-child(3n+2) {font-family: Arial; font-size: 10pt; background-color: #0099ff; color: white}

tr:nth-child(3n+2) td {padding: 10px;}

[slingsrat]

'I'm trying to add padding to every third cell'

 

Like mentioned you are not targeting the cells but the tr, YOU are targeting EVERY THIRD tr element, which makes your statement that everything works confusing? because to 'target every third cell' you would need to use

 

td:nth-child(3n+2)

 

But! If it works except padding, what you really need is EVERY third tr element row cells

 

tr:nth-child(3n+2) {font-family: Arial; font-size: 10pt; background-color: #0099ff; color: white}

tr:nth-child(3n+2) td {padding: 10px;}

Oh thanks for figuring out what I wanted. I did forget to mention that every row was only one cell but you deduced that. Touché.

[Ingolme]

If every row only has one cell then what exactly is the purpose of the table?