Question

我试图显示表行的每个奇数实例，但是有另一个表干预。

（简化）结构是：

<div class="question03">
    <table class="trendgraph">
        <thead>
            <tr class="q3_pageheader">....</tr>
            <tr>...</tr>
        </thead>
        <tbody>...</tbody>
    </table>
    <table class="datatable">
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
    <table class="trendgraph">...</table>
    <table class="datatable">...</table>
</div>

对于这个问题，我正在调用一个'table set'一组table.trendgraph表和一个table.datatable：

<!-- this is a set -->
<table class="trendgraph">...</table>
<table class="datatable">...</table>

其中两个套装适合单页。整个部分仅包含封闭的＆lt; div＆gt;再加上1到6套。

输出实际上是分页媒体：pdf通过PrinceXML，因此，不需要跨浏览器兼容性。

挑战在于：我想在table.trendgraph表中每次只显示一次tr.q3_pageheader，这是第一次出现。此行每页将出现两次。

我的css首先关闭这些行：

div.question03 > table.trendgraph > thead > tr.q3_pageheader {
    display: none;
}

然后我一直在尝试各种方法来重新打开所需的行：

div.question03 > table.trendgraph:nth-child(odd) > thead > tr.q3_pageheader {
    display: table-row;
}

我可以通过设置nth-child（1）来显示第一个tr.q3_pageheader（仅）。奇怪的是，没有tr.q3_pageheader行显示nth-child（2）或nth-child（even）。所有tr.q3_pageheader行都显示为nth-child（odd）。

请注意，当我从html中删除table.datatable时，所有nth-child设置都按预期工作。

我显然可以在这里解决问题，例如在“页面”周围设置div，或者为tr.q3_pageheader的第一个实例设置类。这将是输出各种数量的“表格集”的系统的一部分。如果可能的话，我想在html或css中解决问题而不需要在后端做出额外的决策。

任何帮助或指示将不胜感激。谢谢！

Answer 1

用这个回答我自己的问题：

div.question03 tr.q3_pageheader {
    display: none;
}

div.question03 table:nth-child(4n+1) tr.q3_pageheader {
    display: table-row;
}

我已经确认这在PrinceXML和webkit中都有效。在每页都有一定数量的表格的情况下，类似的东西都可以使用。

如何仅在每页显示一次表格行？

1 个答案: