I have an ordinary HTML table:
<table> <tr> <td class="first-column-style">FAT</td> <td>...</td> </tr> <tr> <td class="first-column-style">FAT</td> <td>...</td> </tr> </table>
I want to apply CSS style to every table cell (td
) in a particular column. Is it possible to do that without applying the class
/style
attribute to every table cell in that column, and without JavaScript?
2015 answer, and based on the first-child answer but MUCH cleaner.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
td:nth-child(1) { /* first column */ } td:nth-child(2) { /* second column */ } td:nth-child(3) { /* third column */ }
Super clean code
Additionally to Sean Patrick Floyd's solution you can combine :first-child
with the adjacent sibling selector +
(also not supported by IE6):
td:first-child { /* first column */ } td:first-child + td { /* second column */ } td:first-child + td + td { /* third column */ } /* etc. */
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