I'm having trouble with the nth-child selector to control the display of table 2. Specifically, I want to show only rows 11-20 in table 2 but I can't seem to get it right. Any suggestions?
Currently, Table 1 is displaying rows 1-10 correctly. Table 2 is showing rows 11-end instead of stopping at 20 like I intended. Table 3 is displaying rows 21-30 as expected.
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;
}