table-footer-group-004

Repeating table footer groups in paged media

WeasyPrint

This browser

Flags
may, paged
Assertion
Print user agents may repeat footer rows on each page spanned by a table (non-normative rule).

Source

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3     <head>
  4         <title>CSS Test: Repeating table footer groups in paged media</title>
  5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
  6         <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-display">
  7         <meta name="flags" content="may paged">
  8         <meta name="assert" content="Print user agents may repeat footer rows on each page spanned by a table (non-normative rule).">
  9         <style type="text/css">
 10             .table
 11             {
 12                 display: table;
 13             }
 14             #tfoot
 15             {
 16                 background: orange;
 17                 display: table-footer-group;
 18             }
 19             #tbody
 20             {
 21                 display: table-row-group;
 22             }
 23             .tr
 24             {
 25                 display: table-row;
 26             }
 27             .td
 28             {
 29                 border: 1px solid black;
 30                 display: table-cell;
 31                 height: 4em;
 32                 width: 4em;
 33             }
 34         </style>
 35     </head>
 36     <body>
 37         <p>Test passes if the "Filler Text" below either repeats or doesn't repeat on the bottom of each page in paged media view.</p>
 38         <div class="table">
 39             <div id="tfoot">
 40                 <div class="tr">
 41                      <div class="td">Filler Text</div>
 42                 </div>
 43             </div>
 44             <div id="tbody">
 45                 <div class="tr">
 46                      <div class="td"></div>
 47                 </div>
 48                 <div class="tr">
 49                      <div class="td"></div>
 50                 </div>
 51                 <div class="tr">
 52                      <div class="td"></div>
 53                 </div>
 54                 <div class="tr">
 55                      <div class="td"></div>
 56                 </div>
 57                 <div class="tr">
 58                      <div class="td"></div>
 59                 </div>
 60                 <div class="tr">
 61                      <div class="td"></div>
 62                 </div>
 63                 <div class="tr">
 64                      <div class="td"></div>
 65                 </div>
 66                 <div class="tr">
 67                      <div class="td"></div>
 68                 </div>
 69                 <div class="tr">
 70                      <div class="td"></div>
 71                 </div>
 72                 <div class="tr">
 73                      <div class="td"></div>
 74                 </div>
 75                 <div class="tr">
 76                      <div class="td"></div>
 77                 </div>
 78                 <div class="tr">
 79                      <div class="td"></div>
 80                 </div>
 81                 <div class="tr">
 82                      <div class="td"></div>
 83                 </div>
 84                 <div class="tr">
 85                      <div class="td"></div>
 86                 </div>
 87                 <div class="tr">
 88                      <div class="td"></div>
 89                 </div>
 90                 <div class="tr">
 91                      <div class="td"></div>
 92                 </div>
 93                 <div class="tr">
 94                      <div class="td"></div>
 95                 </div>
 96                 <div class="tr">
 97                      <div class="td"></div>
 98                 </div>
 99                 <div class="tr">
100                      <div class="td"></div>
101                 </div>
102                 <div class="tr">
103                      <div class="td"></div>
104                 </div>
105                 <div class="tr">
106                      <div class="td"></div>
107                 </div>
108                 <div class="tr">
109                      <div class="td"></div>
110                 </div>
111                 <div class="tr">
112                      <div class="td"></div>
113                 </div>
114                 <div class="tr">
115                      <div class="td"></div>
116                 </div>
117                 <div class="tr">
118                      <div class="td"></div>
119                 </div>
120                 <div class="tr">
121                      <div class="td"></div>
122                 </div>
123                 <div class="tr">
124                      <div class="td"></div>
125                 </div>
126             </div>
127         </div>
128     </body>
129 </html>