Menu
If you want to apply a style to a specific column or row (but not on others), use :nth-child() property from CSS3. This selector is used to apply a style to the element number 'n' inside a parent element.
The CSS child selector has two selectors separated by a > symbol. The first selector indicates the parent element. The second selector indicates the child element CSS will style.
If you set the style table-layout: fixed; on your table, you can override the browser's automatic column resizing. The browser will then set column widths based on the width of cells in the first row of the table. Change your to and remove the inside of it, and then set fixed widths for the cells in .
You can use the :nth-child pseudo class like this:
.countTable table table td:nth-child(2)
Note though, this won't work in older browsers (or IE), you'll need to give the cells a class or use javascript in that case.
Try this:
.countTable table tr td:first-child + td
You could also reiterate in order to style the others columns:
.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */
To change only the second column of a table use the following:
General Case:
table td + td{ /* this will go to the 2nd column of a table directly */
background:red
}
Your case:
.countTable table table td + td{
background: red
}
Note: this works for all browsers (Modern and old ones) that's why I added my answer to an old question
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With