0

我正在尝试显示表格行的每个奇数实例，但是还有另一个表格介入。

（简化的）结构是：

<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.trendgraph 表和一个 table.datatable 称为“表集”：

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

其中两个集合将适合单个页面。整个部分仅由封闭的 <div> 加上 1 到 6 个集合组成。

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

挑战是：我想在 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 中解决问题，而不需要在后端做出额外的决策。

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

4

1 回答 1

0

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

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

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

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

于 2010-07-02T19:06:19.463 回答