html - CSS 奇数/偶数 td 嵌套

标签 html css background-color

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

相关文章:

css - 如何在 Bootstrap 中设置按钮网格?

javascript - 如何强制 HTML 页面具有水平滚动条

CSS 样式化 md-autocomplete 标签

css - 仅使用 CSS 设置 SVG 图像的 viewBox

html - 带有伪元素的标题的背景颜色

html - 如何使用前/后元素切片背景颜色

HTML/CSS 大小链接到图像

javascript - 在特定时间后隐藏表中的 tr

html - 为什么我的列没有扩大到容器高度?

c++ - 更改整个控制台背景颜色 (Win32 C++)