我正在尝试显示表格行的每个奇数实例,但是还有另一个表格介入。
(简化的)结构是:
<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 中解决问题,而不需要在后端做出额外的决策。
任何帮助或指示将不胜感激。谢谢!