3

我的页面内容区域中有几个 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; }

更新
它可能是一个已经潜入的错误，我已经查看了建议的小提琴并且它工作得很好，所以它只是某个地方的一些错误代码。

4

4 回答 4

4

:nth-child()您可以使用传递even和odd值的组合轻松实现它。例如。看到这个小提琴。

其中，CSS 是

body {
    background-color: black;
    color: red;
}
table tr:nth-child(odd) {
    background-color: blue;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}
于 2013-03-26T15:49:31.090 回答
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>

这是小提琴：http://jsfiddle.net/rBwBm/

于 2013-03-26T15:52:13.573 回答
0

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

于 2013-03-26T15:55:28.633 回答
0

我遇到的问题是两<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，然后开始交替，但是，表格主体的第一行将是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) {}

所以基本上我使用TBodyandTHead标签来制作更具体的 css 样式，非常棒。更多的控制，灵活性。因此，在我的新示例中，您可以在中添加任意数量的行THead，内容应始终以 开头White，并回答我的问题：

THead有什么关系吗？

是的，它与它有关。

于 2013-06-04T12:12:49.720 回答