如何使用CSS为列设置背景颜色？

There is a table. How to set specific background color for the last column using CSS? I need to do it without appending any classes or style attribute to TD elements and without using javascript.

这里有张桌子。如何使用CSS为最后一列设置特定的背景颜色？我需要这样做而不需要将任何类或样式属性附加到TD元素并且不使用javascript。

4 个解决方案

#1

I would use the <col> tag in HTML. <col> can define specific attributes for certain columns.

我会在HTML中使用标签。可以为某些列定义特定属性。

<col/>
<col/>
<col style='width:500px; background:red;' id='says_col'/>

Would make the width of the third column 500px and the background red. These are very useful because they can be used to get to other things on specific columns. Here are some resources you might find useful.

会使第三列的宽度为500px，背景为红色。这些非常有用，因为它们可用于访问特定列上的其他内容。以下是您可能会发现有用的一些资源。

http://www.boogiejack.com/html/html-col-tag.html

http://www.w3schools.com/tags/tag_col.asp

#2

In css:

在css中：

td { background: blue; }
td:last-child { background: red; }

These are called pseudo classes

这些被称为伪类

You can get more info at:

您可以在以下网站获得更多信息

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx

#3

You could use the last-child selector, but be warned that IE probably won't like this.

你可以使用last-child选择器，但要注意IE可能不会喜欢这个。

It'd go something like this:

它会是这样的：

#myTable tr td:last-child {
    background: red;
}

#4

-1

The server-side technology usually helps for this, by adding a "last" class to the last td element. Then, all you need is :

服务器端技术通常通过向最后一个td元素添加“last”类来帮助实现此目的。然后，您只需要：

td.last {
    background: /* bleh */;
}

The col solutions sounds fun, even though I've never used it.

col解决方案听起来很有趣，即使我从未使用它。

#1