slingsrat Posted June 19, 2016 Share Posted June 19, 2016 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 More sharing options...
davej Posted June 19, 2016 Share Posted June 19, 2016 What is in the cell? Link to comment Share on other sites More sharing options...
Ingolme Posted June 19, 2016 Share Posted June 19, 2016 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 More sharing options...
slingsrat Posted June 23, 2016 Author Share Posted June 23, 2016 What is in the cell? Just text Link to comment Share on other sites More sharing options...
slingsrat Posted June 23, 2016 Author Share Posted June 23, 2016 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 More sharing options...
dsonesuk Posted June 23, 2016 Share Posted June 23, 2016 '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 More sharing options...
slingsrat Posted June 23, 2016 Author Share Posted June 23, 2016 '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 More sharing options...
Ingolme Posted June 23, 2016 Share Posted June 23, 2016 If every row only has one cell then what exactly is the purpose of the table? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now