How to style each table cell in a column via CSS?
I have an ordinary HTML table:
<table>
<tr&g开发者_StackOverflow中文版t;
<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. */
Use the <col> tag and style it following this guide. This way you only need to add a class (or inline style specification) to the <col> element instead of each <td> in the table.
Caveats:
- Any row or cell styling will supersede column styling.
- The
<col>tag only supports stylingborder,background,widthandvisibility(and their derivatives, such asbackground-color). - The
borderdeclaration does not work unless the<table>hasborder-collapse: collapse;, and the behavior is inconsistent between browsers. - The
visibilitydeclaration does not work properly in Chrome due to a known bug.
Well for the first and last columns you can use the :first-child and :last-child pseudo class:
/* make the first cell of every row bold */
tr td:FIRST-CHILD{
font-weight:bold;
}
/* make the last cell of every row italic */
tr td:LAST-CHILD{
font-style:italic;
}
Reference:
- :first-child and :last-child
The following allows you to style columns at table level, and can be used in a more general way to the previous examples, as you don't have to make assumptions about the styles applied to a given column index within the style sheet itself.
I agree that the <col> approach is best if it fits your needs, but the range of styles is very limited.
The sample styles column 1, 2, & 4 with a grey text style.
HTML
<table class="example col1-readonly col2-readonly col4-readonly">
CSS
.example.col1-readonly tr td:nth-child(1),
.example.col2-readonly tr td:nth-child(2),
.example.col3-readonly tr td:nth-child(3),
.example.col4-readonly tr td:nth-child(4) {
color:#555;
}
This is an old post. But I had the same question. Found this to be working:
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(3)>td:nth-child(2){background: red;}
</style>
</head>
<table>
<tr><td></td><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>2</td><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>3</td><td>A3</td><td>B3</td><td>C3</td></tr>
</table>
</html>
This style setting sets the background color to red in the third row and second column,
加载中,请稍侯......
精彩评论