Question

我的这个表格有以下CSS格式：

<table cellspacing="2">
    <tbody>
        <tr>
            <th>Name</th>                            
            <th>Area</th>                            
        </tr>
        <tr>
            <td>${it.conference}</td>                                              
            <td>${it.accepted}</td>                                      
        </tr>
    </tbody>
</table>

和CSS：

table {
    padding-left: 10px;
    width:90%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    text-align:left;
}

th, td {
    padding:5px 10px;
}

th {
    color:#666666;
    border-top:2px solid #b7ddf2;
    background-color:#ebf4fb;
}

如何为每一行应用单独的css修改（例如，我想更改'Name'的颜色，而不会弄乱其他行格式化，这意味着，只修改那一行。这可能是办？

Answer 1

您是否正在寻找与nth-child CSS pseudo-class类似的内容？

如果您希望对每个人进行更精细的控制，您可能需要考虑对他们应用类并对其进行不同的样式设置。

编辑：这是第n个孩子的a few examples。

Answer 2

使用仅CSS方法，您需要在要设置样式的行中添加一些类，如下所示：

<table cellspacing="2">
      <tbody><tr>
         <th class="color1">Name</th>                            
         <th>Area</th>                            
     </tr>
        <td>${it.conference}</td>                                              
        <td>${it.accepted}</td>                                      
     </tr></tbody>
    </table>

然后设置样式：

.color1 {
   background-color: (somecolor);
}

Answer 3

将一个类应用于您想要的任何元素，并将CSS样式应用于它。 http://jsfiddle.net/robx/wzXAJ/ IE：申请<th class="name">Name</th>。

Answer 4

如果你可以在不支持IE 7和8的情况下离开，你可以......

th:nth-of-type(1) {
  color: #c00;
}

否则，添加一个类，例如th class =“whatever”，然后......

th.whatever {
  color: #c00;
}

观看现场演示：

http://jsfiddle.net/GFPgB/

Answer 5

如果要根据元素的内容应用CSS样式，那么CSS无法实现。另一方面，如果您希望根据其位置应用CSS样式，则可以使用：nth-child（N）伪类。例如

th:nth-child(1) /*for name*/
{
color: blue;
}

th:nth-child(2) /*for area*/
{
color: red;
}

Answer 6

设计“Even”＆amp;然后“奇数”行使用CSS3 像：

tr:nth-child(odd){
    background:#999;}

tr:nth-child(even){
    background:#f5f5f5;}

Answer 7

我知道这是一个陈旧的答案，但我在Jquery中做了一个有趣的例子，也许它会帮助有人解决他们的问题。

<强> JSFIDDLE

它将从<p>中获取所有document个元素，并将循环遍历它们，因为jquery会这样做，它会为页面上的每个<p>元素添加一个CSS样式。

表格每行的CSS颜色不同

7 个答案: