如何僅在每頁顯示一次表格行？

我想顯示錶格行的每個奇數實例，但是還有另一個表格插入。如何僅在每頁顯示一次表格行？

的（簡化的）結構是：

<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組。

輸出實際上是分頁媒體：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; 
}

我能拿到第一tr.q3_pageheader（）通過設置第n個孩子（1）顯示。奇怪的是，沒有一個tr.q3_pageheader行顯示爲第n個子節點（2）或第n個子節點（偶數）。所有tr.q3_pageheader行都以nth-child（奇數）顯示。

請注意，當我從html中刪除table.datatable時，所有的第n個子設置都按預期工作。

我明顯可以在這裏做些工作，比如在'頁面'周圍設置一個div，或者爲tr.q3_pageheader的第一個實例設置一個類。這將是一個系統的一部分，它將輸出各種數量的「表格集」。如果可能的話，我想只在html或css中解決問題，而不需要在後端做出額外的決策。

任何幫助或指針，將不勝感激。謝謝！

來源

2010-06-29 mwiik

回答我的問題與此：

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

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

我已經證實了這一工作無論是在PrinceXML和WebKit。任何情況下，類似的東西都適用於每頁有一定數量的表格的情況。

來源

2010-07-02 19:06:19 mwiik

如何僅在每頁顯示一次表格行？

回答

相關問題