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 header 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 header rows on each page spanned by a table (non-normative rule).">
9 <style type="text/css">
10 .table
11 {
12 display: table;
13 }
14 #thead
15 {
16 background: orange;
17 display: table-header-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 top of each page in paged media view.</p>
38 <div class="table">
39 <div id="thead">
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>