html - CSS: counter property renders empty -
i'm trying create printing page has attachments running numbering (for example: page 3 of 5). far have succesfully created page header repeating on attachment pages, , has correct page numbering, on first page. on second attachment page total number rendered empty. i'm trying not use javascript achieve this.
to reproduce issue, copy following code html file open in firefox , go print preview , move second or third page, notice total page number empty.
there no need support other browsers firefox.
any welcome! :)
<!doctype html> <html> <head> </head> <body> <style> body{ counter-reset: joku, attachment; } table { page-break-inside: auto; page-break-after: always; } tr { page-break-inside:avoid; page-break-after:auto; } table td { border-bottom:1px sodiv.attachment-page-breakd gray; } th { font-family:arial; color:black; background-color:div.attachment-page-breakghtgrey; } thead { display:table-header-group; } tbody { display:table-row-group; } .attachment-header{ display: block; counter-increment: joku; } .attachment-header::after{ counter-increment: attachment; content: "page:" counter(attachment, decimal) " of " counter(joku, decimal) !important; } </style> <table border="0" cellpadding="2" cellspacing="0"> <tbody> <tr> <td>1</td> <td>dummy filler</td> <td>dummy filler</td> </tr> <tr> <td>2</td> <td>dummy filler</td> <td>dummy filler</td> </tr> <tr> <td>3</td> <td>dummy filler</td> <td>dummy filler</td> </tr> <tr> <td>4</td> <td>dummy filler 4</td> <td>last name 4</td> </tr> <tr> <td>5</td> <td>dummy filler 5</td> <td>last name 5</td> </tr> <tr> <td>6</td> <td>dummy filler 6</td> <td>last name 6</td> </tr> <tr> <td>7</td> <td>dummy filler 7</td> <td>last name 7</td> </tr> <tr> <td>8</td> <td>dummy filler 8</td> <td>last name 8</td> </tr> <tr> <td>9</td> <td>dummy filler 9</td> <td>last name 9</td> </tr> <tr> <td>10</td> <td>dummy filler 10</td> <td>last name 10</td> </tr> <tr> <td>11</td> <td>dummy filler 11</td> <td>last name 11</td> </tr> <tr> <td>12</td> <td>dummy filler 12</td> <td>last name 12</td> </tr> <tr> <td>13</td> <td>dummy filler 13</td> <td>last name 13</td> </tr> <tr> <td>14</td> <td>dummy filler 14</td> <td>last name 14</td> </tr> <tr> <td>15</td> <td>dummy filler 15</td> <td>last name 15</td> </tr> <tr> <td>16</td> <td>dummy filler 16</td> <td>last name 16</td> </tr> <tr> <td>17</td> <td>dummy filler 17</td> <td>last name 17</td> </tr> <tr> <td>18</td> <td>dummy filler 18</td> <td>last name 18</td> </tr> <tr> <td>19</td> <td>dummy filler 19</td> <td>last name 19</td> </tr> <tr> <td>20</td> <td>dummy filler 20</td> <td>last name 20</td> </tr> <tr> <td>21</td> <td>dummy filler 21</td> <td>last name 21</td> </tr> <tr> <td>22</td> <td>dummy filler 22</td> <td>last name 22</td> </tr> <tr> <td>23</td> <td>dummy filler 23</td> <td>last name 23</td> </tr> <tr> <td>24</td> <td>dummy filler 24</td> <td>last name 24</td> </tr> <tr> <td>25</td> <td>dummy filler 25</td> <td>last name 25</td> </tr> <tr> <td>26</td> <td>dummy filler 26</td> <td>last name 26</td> </tr> <tr> <td>27</td> <td>dummy filler 27</td> <td>last name 27</td> </tr> <tr> <td>28</td> <td>dummy filler 28</td> <td>last name 28</td> </tr> <tr> <td>29</td> <td>dummy filler 29</td> <td>last name 29</td> </tr> <tr> <td>30</td> <td>dummy filler 30</td> <td>last name 30</td> </tr> <tr> <td>31</td> <td>dummy filler 31</td> <td>last name 31</td> </tr> <tr> <td>32</td> <td>dummy filler 32</td> <td>last name 32</td> </tr> <tr> <td>33</td> <td>dummy filler 33</td> <td>last name 33</td> </tr> <tr> <td>34</td> <td>dummy filler 34</td> <td>last name 34</td> </tr> <tr> <td>35</td> <td>dummy filler 35</td> <td>last name 35</td> </tr> <tr> <td>36</td> <td>dummy filler 36</td> <td>last name 36</td> </tr> <tr> <td>37</td> <td>dummy filler 37</td> <td>last name 37</td> </tr> <tr> <td>38</td> <td>dummy filler 38</td> <td>last name 38</td> </tr> <tr> <td>39</td> <td>dummy filler 39</td> <td>last name 39</td> </tr> <tr> <td>40</td> <td>dummy filler 40</td> <td>last name 40</td> </tr> <tr> <td>41</td> <td>dummy filler 41</td> <td>last name 41</td> </tr> <tr> <td>42</td> <td>dummy filler 42</td> <td>last name 42</td> </tr> <tr> <td>43</td> <td>dummy filler 43</td> <td>last name 43</td> </tr> <tr> <td>44</td> <td>dummy filler 44</td> <td>last name 44</td> </tr> <tr> <td>45</td> <td>dummy filler 45</td> <td>last name 45</td> </tr> <tr> <td>46</td> <td>dummy filler 46</td> <td>last name 46</td> </tr> <tr> <td>47</td> <td>dummy filler 47</td> <td>last name 47</td> </tr> </tbody> </table> <div id="attachment-container"> <table border="0" cellpadding="2" cellspacing="0"> <thead> <tr> <th colspan="3"> <div class="attachment-header"></div> </th> </tr> </thead> <tbody> <tr> <td>1</td> <td>attachment first first name 1</td> <td>attachment first last name 1</td> </tr> <tr> <td>2</td> <td>attachment first first name 2</td> <td>attachment first last name 2</td> </tr> <tr> <td>3</td> <td>attachment first first name 3</td> <td>attachment first last name 3</td> </tr> <tr> <td>4</td> <td>first name 4</td> <td>last name 4</td> </tr> <tr> <td>5</td> <td>first name 5</td> <td>last name 5</td> </tr> <tr> <td>6</td> <td>first name 6</td> <td>last name 6</td> </tr> <tr> <td>7</td> <td>first name 7</td> <td>last name 7</td> </tr> <tr> <td>8</td> <td>first name 8</td> <td>last name 8</td> </tr> <tr> <td>9</td> <td>first name 9</td> <td>last name 9</td> </tr> <tr> <td>10</td> <td>first name 10</td> <td>last name 10</td> </tr> <tr> <td>11</td> <td>first name 11</td> <td>last name 11</td> </tr> <tr> <td>12</td> <td>first name 12</td> <td>last name 12</td> </tr> <tr> <td>13</td> <td>first name 13</td> <td>last name 13</td> </tr> <tr> <td>14</td> <td>first name 14</td> <td>last name 14</td> </tr> <tr> <td>15</td> <td>first name 15</td> <td>last name 15</td> </tr> <tr> <td>16</td> <td>first name 16</td> <td>last name 16</td> </tr> <tr> <td>17</td> <td>first name 17</td> <td>last name 17</td> </tr> <tr> <td>18</td> <td>first name 18</td> <td>last name 18</td> </tr> <tr> <tr> <td>4</td> <td>first name 4</td> <td>last name 4</td> </tr> <tr> <td>5</td> <td>first name 5</td> <td>last name 5</td> </tr> <tr> <td>6</td> <td>first name 6</td> <td>last name 6</td> </tr> <tr> <td>7</td> <td>first name 7</td> <td>last name 7</td> </tr> <tr> <td>8</td> <td>first name 8</td> <td>last name 8</td> </tr> <tr> <td>9</td> <td>first name 9</td> <td>last name 9</td> </tr> <tr> <td>10</td> <td>first name 10</td> <td>last name 10</td> </tr> <tr> <td>11</td> <td>first name 11</td> <td>last name 11</td> </tr> <tr> <td>12</td> <td>first name 12</td> <td>last name 12</td> </tr> <tr> <td>13</td> <td>first name 13</td> <td>last name 13</td> </tr> <tr> <td>14</td> <td>first name 14</td> <td>last name 14</td> </tr> <tr> <td>15</td> <td>first name 15</td> <td>last name 15</td> </tr> <tr> <td>16</td> <td>first name 16</td> <td>last name 16</td> </tr> <tr> <td>17</td> <td>first name 17</td> <td>last name 17</td> </tr> <tr> <td>18</td> <td>first name 18</td> <td>last name 18</td> </tr> <tr> <tr> <td>4</td> <td>first name 4</td> <td>last name 4</td> </tr> <tr> <td>5</td> <td>first name 5</td> <td>last name 5</td> </tr> <tr> <td>6</td> <td>first name 6</td> <td>last name 6</td> </tr> <tr> <td>7</td> <td>first name 7</td> <td>last name 7</td> </tr> <tr> <td>8</td> <td>first name 8</td> <td>last name 8</td> </tr> <tr> <td>9</td> <td>first name 9</td> <td>last name 9</td> </tr> <tr> <td>10</td> <td>first name 10</td> <td>last name 10</td> </tr> <tr> <td>11</td> <td>first name 11</td> <td>last name 11</td> </tr> <tr> <td>12</td> <td>first name 12</td> <td>last name 12</td> </tr> <tr> <td>13</td> <td>first name 13</td> <td>last name 13</td> </tr> <tr> <td>14</td> <td>first name 14</td> <td>last name 14</td> </tr> <tr> <td>15</td> <td>first name 15</td> <td>last name 15</td> </tr> <tr> <td>16</td> <td>first name 16</td> <td>last name 16</td> </tr> <tr> <td>17</td> <td>first name 17</td> <td>last name 17</td> </tr> <tr> <td>18</td> <td>first name 18</td> <td>last name 18</td> </tr> <tr> <tr> <td>4</td> <td>first name 4</td> <td>last name 4</td> </tr> <tr> <td>5</td> <td>first name 5</td> <td>last name 5</td> </tr> <tr> <td>6</td> <td>first name 6</td> <td>last name 6</td> </tr> <tr> <td>7</td> <td>first name 7</td> <td>last name 7</td> </tr> <tr> <td>8</td> <td>first name 8</td> <td>last name 8</td> </tr> <tr> <td>9</td> <td>first name 9</td> <td>last name 9</td> </tr> <tr> <td>10</td> <td>first name 10</td> <td>last name 10</td> </tr> <tr> <td>11</td> <td>first name 11</td> <td>last name 11</td> </tr> <tr> <td>12</td> <td>first name 12</td> <td>last name 12</td> </tr> <tr> <td>13</td> <td>first name 13</td> <td>last name 13</td> </tr> <tr> <td>14</td> <td>first name 14</td> <td>last name 14</td> </tr> <tr> <td>15</td> <td>first name 15</td> <td>last name 15</td> </tr> <tr> <td>16</td> <td>first name 16</td> <td>last name 16</td> </tr> <tr> <td>17</td> <td>first name 17</td> <td>last name 17</td> </tr> <tr> <td>18</td> <td>first name 18</td> <td>last name 18</td> </tr> <tr> <tr> <td>4</td> <td>first name 4</td> <td>last name 4</td> </tr> <tr> <td>5</td> <td>first name 5</td> <td>last name 5</td> </tr> <tr> <td>6</td> <td>first name 6</td> <td>last name 6</td> </tr> <tr> <td>7</td> <td>first name 7</td> <td>last name 7</td> </tr> <tr> <td>8</td> <td>first name 8</td> <td>last name 8</td> </tr> <tr> <td>9</td> <td>first name 9</td> <td>last name 9</td> </tr> <tr> <td>10</td> <td>first name 10</td> <td>last name 10</td> </tr> <tr> <td>11</td> <td>first name 11</td> <td>last name 11</td> </tr> <tr> <td>12</td> <td>first name 12</td> <td>last name 12</td> </tr> <tr> <td>13</td> <td>first name 13</td> <td>last name 13</td> </tr> <tr> <td>14</td> <td>first name 14</td> <td>last name 14</td> </tr> <tr> <td>15</td> <td>first name 15</td> <td>last name 15</td> </tr> <tr> <td>16</td> <td>first name 16</td> <td>last name 16</td> </tr> <tr> <td>17</td> <td>first name 17</td> <td>last name 17</td> </tr> <tr> <td>18</td> <td>first name 18</td> <td>last name 18</td> </tr> <tr> <tr> <td>4</td> <td>first name 4</td> <td>last name 4</td> </tr> <tr> <td>5</td> <td>first name 5</td> <td>last name 5</td> </tr> <tr> <td>6</td> <td>first name 6</td> <td>last name 6</td> </tr> <tr> <td>7</td> <td>first name 7</td> <td>last name 7</td> </tr> <tr> <td>8</td> <td>first name 8</td> <td>last name 8</td> </tr> <tr> <td>9</td> <td>first name 9</td> <td>last name 9</td> </tr> <tr> <td>10</td> <td>first name 10</td> <td>last name 10</td> </tr> <tr> <td>11</td> <td>first name 11</td> <td>last name 11</td> </tr> <tr> <td>12</td> <td>first name 12</td> <td>last name 12</td> </tr> <tr> <td>13</td> <td>first name 13</td> <td>last name 13</td> </tr> <tr> <td>14</td> <td>first name 14</td> <td>last name 14</td> </tr> <tr> <td>15</td> <td>first name 15</td> <td>last name 15</td> </tr> <tr> <td>16</td> <td>first name 16</td> <td>last name 16</td> </tr> <tr> <td>17</td> <td>first name 17</td> <td>last name 17</td> </tr> <tr> <td>18</td> <td>first name 18</td> <td>last name 18</td> </tr> <tr> <tr> <td>4</td> <td>first name 4</td> <td>last name 4</td> </tr> <tr> <td>5</td> <td>first name 5</td> <td>last name 5</td> </tr> <tr> <td>6</td> <td>first name 6</td> <td>last name 6</td> </tr> <tr> <td>7</td> <td>first name 7</td> <td>last name 7</td> </tr> <tr> <td>8</td> <td>first name 8</td> <td>last name 8</td> </tr> <tr> <td>9</td> <td>first name 9</td> <td>last name 9</td> </tr> <tr> <td>10</td> <td>first name 10</td> <td>last name 10</td> </tr> <tr> <td>11</td> <td>first name 11</td> <td>last name 11</td> </tr> <tr> <td>12</td> <td>first name 12</td> <td>last name 12</td> </tr> <tr> <td>13</td> <td>first name 13</td> <td>last name 13</td> </tr> <tr> <td>14</td> <td>first name 14</td> <td>last name 14</td> </tr> <tr> <td>15</td> <td>first name 15</td> <td>last name 15</td> </tr> <tr> <td>16</td> <td>first name 16</td> <td>last name 16</td> </tr> <tr> <td>17</td> <td>first name 17</td> <td>last name 17</td> </tr> <tr> <td>18</td> <td>first name 18</td> <td>last name 18</td> </tr> <tr> <tr> <td>4</td> <td>first name 4</td> <td>last name 4</td> </tr> <tr> <td>5</td> <td>first name 5</td> <td>last name 5</td> </tr> <tr> <td>6</td> <td>first name 6</td> <td>last name 6</td> </tr> <tr> <td>7</td> <td>first name 7</td> <td>last name 7</td> </tr> <tr> <td>8</td> <td>first name 8</td> <td>last name 8</td> </tr> <tr> <td>9</td> <td>first name 9</td> <td>last name 9</td> </tr> <tr> <td>10</td> <td>first name 10</td> <td>last name 10</td> </tr> <tr> <td>11</td> <td>first name 11</td> <td>last name 11</td> </tr> <tr> <td>12</td> <td>first name 12</td> <td>last name 12</td> </tr> <tr> <td>13</td> <td>first name 13</td> <td>last name 13</td> </tr> <tr> <td>14</td> <td>first name 14</td> <td>last name 14</td> </tr> <tr> <td>15</td> <td>first name 15</td> <td>last name 15</td> </tr> <tr> <td>16</td> <td>first name 16</td> <td>last name 16</td> </tr> <tr> <td>17</td> <td>first name 17</td> <td>last name 17</td> </tr> <tr> <td>18</td> <td>first name 18</td> <td>last name 18</td> </tr> <tr> <tr> <td>4</td> <td>first name 4</td> <td>last name 4</td> </tr> <tr> <td>5</td> <td>first name 5</td> <td>last name 5</td> </tr> <tr> <td>6</td> <td>first name 6</td> <td>last name 6</td> </tr> <tr> <td>7</td> <td>first name 7</td> <td>last name 7</td> </tr> <tr> <td>8</td> <td>first name 8</td> <td>last name 8</td> </tr> <tr> <td>9</td> <td>first name 9</td> <td>last name 9</td> </tr> <tr> <td>10</td> <td>first name 10</td> <td>last name 10</td> </tr> <tr> <td>11</td> <td>first name 11</td> <td>last name 11</td> </tr> <tr> <td>12</td> <td>first name 12</td> <td>last name 12</td> </tr> <tr> <td>13</td> <td>first name 13</td> <td>last name 13</td> </tr> <tr> <td>14</td> <td>first name 14</td> <td>last name 14</td> </tr> <tr> <td>15</td> <td>first name 15</td> <td>last name 15</td> </tr> <tr> <td>16</td> <td>first name 16</td> <td>last name 16</td> </tr> <tr> <td>17</td> <td>first name 17</td> <td>last name 17</td> </tr> <tr> <td>18</td> <td>first name 18</td> <td>last name 18</td> </tr> <tr> <td>19</td> <td>first name 19</td> <td>last name 19</td> </tr> <tr> <td>20</td> <td>first name 20</td> <td>last name 20</td> </tr> <tr> <td>21</td> <td>first name 21</td> <td>last name 21</td> </tr> <tr> <td>22</td> <td>first name 22</td> <td>last name 22</td> </tr> <tr> <td>23</td> <td>first name 23</td> <td>last name 23</td> </tr> <tr> <td>24</td> <td>first name 24</td> <td>last name 24</td> </tr> <tr> <td>25</td> <td>first name 25</td> <td>last name 25</td> </tr> <tr> <td>26</td> <td>first name 26</td> <td>last name 26</td> </tr> <tr> <td>27</td> <td>first name 27</td> <td>last name 27</td> </tr> <tr> <td>28</td> <td>first name 28</td> <td>last name 28</td> </tr> <tr> <td>29</td> <td>first name 29</td> <td>last name 29</td> </tr> <tr> <td>30</td> <td>first name 30</td> <td>last name 30</td> </tr> <tr> <td>31</td> <td>first name 31</td> <td>last name 31</td> </tr> <tr> <td>32</td> <td>first name 32</td> <td>last name 32</td> </tr> <tr> <td>33</td> <td>first name 33</td> <td>last name 33</td> </tr> <tr> <td>34</td> <td>first name 34</td> <td>last name 34</td> </tr> <tr> <td>35</td> <td>first name 35</td> <td>last name 35</td> </tr> <tr> <td>36</td> <td>first name 36</td> <td>last name 36</td> </tr> <tr> <td>37</td> <td>first name 37</td> <td>last name 37</td> </tr> <tr> <td>38</td> <td>first name 38</td> <td>last name 38</td> </tr> <tr> <td>39</td> <td>first name 39</td> <td>last name 39</td> </tr> <tr> <td>40</td> <td>first name 40</td> <td>last name 40</td> </tr> <tr> <td>41</td> <td>first name 41</td> <td>last name 41</td> </tr> <tr> <td>42</td> <td>first name 42</td> <td>last name 42</td> </tr> <tr> <td>43</td> <td>first name 43</td> <td>last name 43</td> </tr> <tr> <td>44</td> <td>first name 44</td> <td>last name 44</td> </tr> <tr> <td>45</td> <td>first name 45</td> <td>last name 45</td> </tr> <tr> <td>46</td> <td>first name 46</td> <td>last name 46</td> </tr> <tr> <td>47</td> <td>first name 47</td> <td>last name 47</td> </tr> <tr> <td>48</td> <td>attachment last first name 48</td> <td>attachment last last name 48</td> </tr> <tr> <td>49</td> <td>attachment last first name 49</td> <td>attachment last last name 49</td> </tr> <tr> <td>50</td> <td>attachment last first name 50</td> <td>attachment last last name 50</td> </tr> </tbody> </table> </div> </body> </html>
Comments
Post a Comment