CSS Print Wizardry?

Frappe Framework Print Formats
1

Hi everyone-
I’m trying to figure out how to do something in my check print format. Everything is working fine except I can’t get my ‘table 2’ to display only what I want.
Here’s the idea:
3 tables side by side, each lists the invoices and amount being paid with the check. Sometimes we pay as many as 30 invoices on one check to our suppliers which is the reason we need this. Everything is working for my tables except this CSS.

Table 1 should show rows 1-10 – this is working
Table 2 should show rows 11-20 – this currently shows 11-end (I can’t get it to stop at 20)
Table 3 should show 21-30 – this is working

table.style1 {
border-collapse: collapse;
}

table.style1 > tbody > tr:nth-child(n + 11) {
display: none;
}

table.style2 {
border-collapse: collapse;
}

table.style2 > tbody > tr:nth-child(-n + 10):nth-child(-n + 19) {
display: none;
}

table.style3 {
border-collapse: collapse;
}

table.style3 > tbody > tr:nth-child(-n + 20) {
display: none;

2

Anyone have any ideas for me on this? I’m desperate! Tomorrow is check printing day!

3

For anyone else interested, this is how I got it to work exactly as I needed:

    table.style1 {
    border-collapse: collapse;
}

/*Hide any after the 10th*/
table.style1 > tbody > tr:nth-child(n + 11) {
    display: none;
}

/*this is necessary so the excess rows do not take up space*/

table.style2 {
    border-collapse: collapse;
}

/*Show 10th-20th*/
table.style2 > tbody > tr:nth-child(-n + 10),
table.style2 > tbody > tr:nth-child(n + 21) {
  display: none;
}

/*this is necessary so the excess rows do not take up space*/

table.style3 {
    border-collapse: collapse;
}

/*Show any after the 20th*/
table.style3 > tbody > tr:nth-child(-n + 20) {
    display: none;
}
1 Like