Jump to content

padding in selected cells


slingsrat
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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
Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

'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;}

Link to comment
Share on other sites

'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é.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...