gpt4 book ai didi

html - CSS 奇数/偶数 td 嵌套

转载 作者:行者123 更新时间:2023-11-28 14:36:41 24 4
gpt4 key购买 nike

我正在尝试为我的行设计奇数/偶数样式的样式。该行将被标记为奇/偶类,但样式需要应用于包含的 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 中切换偶数和赔率?

http://jsfiddle.net/fB9Db/1/

<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/

24 4 0
文章推荐: javascript - 动画在 Microsoft Edge 中呈现不佳
文章推荐: css - 我的啤酒网站上的粘性页脚有问题
文章推荐: html - 当我在 jQuery 中调用它们时,jQuery getscript 回调没有出现
文章推荐: css - 如果文本和图像位于两个单独的
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com