Question

我的页面内容区域中有几个html表格。这种风格很奇怪，因为它不会在每个表的开头处开始新鲜的交替行颜色，而是通过表格列表进行处理。

<table>
    <tr>
       Blue
    </tr>
    <tr>
       White
    </tr>
    <tr>
       Blue
    </tr>
</table>

<table>
    <tr>
        White
    </tr>
    <tr>
        Blue
    </tr>
    <tr>
        White
    </tr>
</table>

行中的颜色表示css将设置为行背景的内容。但我希望css再次为下一张桌子开始交替。所以它会是：

<table>
    <tr>
       Blue
    </tr>
    <tr>
       White
    </tr>
    <tr>
       Blue
    </tr>
</table>

<table>
    <tr>
        Blue
    </tr>
    <tr>
        White
    </tr>
    <tr>
        Blue
    </tr>
</table>

THBODY是否与它有关？

谢谢，

CSS代码

table { border-collapse:collapse; text-align:center; }

table th, td { border:1px solid #759EC7; padding:3px 7px 2px; }

th { color: #fff;
background-color: #5c87b2; text-align:center; }

tr:nth-child(odd) { background-color: #CEE1F5; }
tr:nth-child(even) { background-color: #fff; }

更新
它可能是一个悄悄进入的错误，我看看建议的小提琴，它完美地工作，所以它只是某些错误的代码。

Answer 1

通过传递:nth-child()和even值，您可以使用odd的组合轻松实现此目标。例如。见this fiddle。

其中，CSS是

body {
    background-color: black;
    color: red;
}
table tr:nth-child(odd) {
    background-color: blue;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}

Answer 2

唯一的问题是缺少表格中的标签。如果添加它，它可以完美地工作。它不应该与tbody标签有任何关系。

<table>
    <tr>
        <td>Blue</td>
    </tr>
    <tr>
        <td>White</td>
    </tr>
    <tr>
        <td>Blue</td>
    </tr>
</table>
<table>
    <tr>
        <td>Blue</td>
    </tr>
    <tr>
        <td>White</td>
    </tr>
    <tr>
        <td>Blue</td>
    </tr>
</table>

here is the fiddle: http://jsfiddle.net/rBwBm/

Answer 3

我认为你是用javascript做的，对吧？可能用$（'tr'）通过jquery获取tr的集合？尝试使用CSS nth-child（odd）和nth-child（even）代替，大多数现代浏览器都不会有任何问题。

Answer 4

我遇到的问题是两个<TH>行，它们通过交替的行着色。例如：

<tr>
    <th colpsan="2">Name</th>
</tr>
<tr>
    <th>First</th>
    <th>Last</th>
</tr>

这会在Blue行开始Name，然后开始交替。所以表体的第一行是Blue

<tr>
    <th>Name</th>
</tr>

这会像Blue一样在Name行开始，然后开始交替，但是，表格的第一行将是{{1} }

在这些情况下，它会显示出一种不同于我想要达到的改变风格。所以我所做的就是解决这个问题：

White

然后我将样式表更改为：

<thead>
    <tr>
        <th colpsan="2">Name</th>
    </tr>
    <tr>
        <th>First</th>
        <th>Last</th>
    </tr>
</thead>
<tbody>
   <!-- Table Content in Here -->
</tbody>

所以基本上我使用tbody tr:nth-child(odd) {} tbody tr:nth-child(even) {}和TBody标签来制作更具体的css样式，这很棒。更多控制，灵活性。因此，在我的新示例中，您可以在THead中添加任意数量的行，内容应始终从THead开始，并回答我的问题：

White是否与它有关？

是的，一切与它有关。

HTML表格交替行THBody用法

4 个答案: