我正在尝试为我的行设计奇数/偶数样式的样式。该行将被标记为奇/偶类,但样式需要应用于包含的 td/th。
样式不能直接放在行上的原因是因为将背景颜色而不是 td/th 应用于行会导致某些浏览器中的结果不一致。
当我将颜色应用于 td/th 时,它会导致嵌套场景出现问题。
<html><head><title>Nesting</title></head><body>
<style type="text/css">
.even td, .even th {
background-color: #FBFCFD;
}
.odd td, .odd th {
background-color: #FEFFFF;
}
</style>
<table width="100%">
<tr class="even">
<th>Test</th>
<td>Test</td>
</tr>
<tr class="odd">
<th>Test</th>
<td>Test</td>
</tr>
<tr class="even">
<th>Test</th>
<td>Test</td>
</tr>
<tr class="odd">
<th>Test</th>
<td>
<table width="100%">
<tr class="even">
<th>Test</th>
<td>Test</td>
</tr>
<tr class="odd">
<th>Test</th>
<td>Test</td>
</tr>
<tr class="even">
<th>Test</th>
<td>Test</td>
</tr>
<tr class="odd">
<th>Test</th>
<td>
<table width="100%">
<tr class="even">
<th>Test</th>
<td>Test</td>
</tr>
<tr class="odd">
<th>Test</th>
<td>Test</td>
</tr>
<tr class="even">
<th>Test</th>
<td>Test</td>
</tr>
<tr class="odd">
<th>Test</th>
<td>Test</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
如果我能像下面这样做,那将是最理想的,但不幸的是,它在旧浏览器中也能工作。
<style type="text/css">
.even > td, .even > th {
background-color: #FBFCFD;
}
.odd > td, .odd > th {
background-color: #FEFFFF;
}
</style>
实时查看问题 - http://jsfiddle.net/fB9Db/
最佳答案
如何在 css 中切换偶数和赔率?
<style type="text/css">
.even td, .even th {
background-color: #FBFCFD;
}
.odd td, .odd th {
background-color: #FEFFFF;
}
</style>
另一件事是您可以使用红色覆盖整个表格框的背景,然后仅将背景颜色分配给赔率..
关于html - CSS 奇数/偶数 td 嵌套,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6643480/