How to style each table cell in a column via CSS?_问答_开发者

How to style each table cell in a column via CSS?

开发者 https://www.devze.com 2023-01-19 14:14 出处：网络

I have an ordinary HTML table: <table> <tr&g开发者_StackOverflow中文版t; <td class=\"first-column-style\">FAT</td>

相关专题：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 styling border, background, width and visibility (and their derivatives, such as background-color).
The border declaration does not work unless the <table> has border-collapse: collapse;, and the behavior is inconsistent between browsers.
The visibility declaration 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,