Question

我有一张HTML＆amp;表格。 CSS，并希望应用第n个子选择器，以便我可以在表行之间交替颜色。

由于某种原因，每一行都显示为相同的颜色。

Stack Overflow上的类似问题表明，第n个子选择器不适用于子元素，而是适用于元素本身。我理解这一点，并且我有另一个正常工作的表类，但我想要应用它的第二个表类不起作用。

我尝试将WORKING表类应用于多个表。在某些表格中，它可以正常运行，而在其他表格则不然。

CSS：

.prevTable{
    table-layout: fixed;
    border-collapse: collapse;
    padding: 3px;
    border-radius: 3px;
    font-size: 13px;
    margin-left: 0px;
    width: 860px;
}
.prevTable th{
    padding: 6px 3px 6px 3px;
    background-color: #CCCCCC;
    font-family: Raleway;
    text-align: center;
    border-radius: 3px;
    border: 1px solid gray;
}
.prevTable td{
    padding:5px;
    font-family: Raleway;
    border: 1px solid gray;
    text-align:left;
}
table.prevTable tr:nth-child(even){
    background-color: #E6E6E6;
}
table.prevTable tr:nth-child(odd){
    background-color: #C9C9C9;
}

HTML TABLE：

<table class="prevTable">
    <thead>
        <tr>
            <th>Parameter</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
             <tr><td>Some Content</td></tr>
             <tr><td>Some Content</td></tr>
             <tr><td>Some Content</td></tr>
             <tr><td>Some Content</td></tr>
        </tbody>
</table>

MY FIDDLE：http://jsfiddle.net/vranvs/dhnJ9/

有什么想法吗？

谢谢！

Answer 1

您需要将它们包装在表数据中，td

<tbody>
     <tr><td>Some Content</td></tr>
     <tr><td>Some Content</td></tr>
     <tr><td>Some Content</td></tr>
     <tr><td>Some Content</td></tr>
</tbody>

Answer 2

问题似乎是HTML缺少<td>标签。如果这些标记位于HTML中，则CSS可以正常工作，如下所示：http://jsfiddle.net/qHh8v/

Answer 3

http://jsfiddle.net/y9wsg/1/

http://www.w3schools.com/html/html_tables.asp

<table class="prevTable">
    <thead>
        <tr>
            <th>Parameter</th>
            <th>Value</th>
        </tr>
    </thead>
<tbody>
     <tr><td>tr = tablerow</td></tr>
     <tr><td>need a td = table cell (or table data)</td></tr>
     <tr><td>Some Content</td></tr>
     <tr><td>Some Content</td></tr>
</tbody>
</table>

放慢了速度：＆gt;

CSS nth-child所有元素都显示为＆＃34; odd＆＃34;

3 个答案: