CSS/XHTML: Show div after a specific count of table rows

Question

Here is what I got:

• a XHTML file transformed with Oxygen XML from XML and XSL files
• 10 divs right at the beginning of the body, hidden with CSS
• after that: a table with 100 trs

Looks like this:

<div id="div1" style="display:none;">content1</div>
<div id="div2" style="display:none;">content2</div>

<table id="table1">
 <tr><td>conent3</td></tr>
 <tr><td>conent4</td></tr>
 <tr><td>conent5</td></tr>
</table>

Now I'm working on two projects.
1) CSS screen. Which is fine. The divs are shown in a fancybox when clicking links inside the table.
2) CSS print. Which is the reason I am asking here. Convert the XHTML to PDF using Prince XML - okay. In the print version, the hidden divs should show up on a specific position, e.g.:

1. TABLE ROW
2. TABLE ROW
3. TABLE ROW
1. DIV
4. TABLE ROW
5. TABLE ROW
2. DIV

My dream would be to determine the position after how many trs a div should show up, anywhere in the documents (XHTML or CSS).

Maybe you've got an idea how to solve. Thank you. bearli

Answer 1

Easiest solution is to split the table into multiple tables and put the divs between them, or include each div in a separate row inside the table where you want it to appear.

If you don't want to change your document markup, you can always use JavaScript to do it dynamically when the PDF is generated, just remember to run Prince with the --javascript option to enable script execution, or apply an external script file with --script=FILE.js.