column-visibility-002

Column group visibility property

WeasyPrint

This browser

Assertion
Visibility can be set on a table column group.

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: Column group visibility property</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#columns">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="Visibility can be set on a table column group.">
 9         <style type="text/css">
10            #table
11            {
12                display: table;
13            }
14            .cg1, .cg2
15            {
16                display: table-column-group;
17            }
18            .cg2
19            {
20                visibility: collapse;
21            }
22            .col
23            {
24                display: table-column;
25            }
26            .tr
27            {
28                display: table-row;
29            }
30            .td1, .td2
31            {
32                display: table-cell;
33            }
34            .td2
35            {
36                background: red;
37            }
38         </style>
39     </head>
40     <body>
41         <p>Test passes if there is no red visible on the page.</p>
42         <div id="table">
43             <div class="cg1">
44                 <div class="col"></div>
45                 <div class="col"></div>
46             </div>
47             <div class="cg2">
48                 <div class="col"></div>
49                 <div class="col"></div>
50             </div>
51             <div class="tr">
52                 <div class="td1">Filler Text</div>
53                 <div class="td1">Filler Text</div>
54                 <div class="td2">This test</div>
55                 <div class="td2">failed.</div>
56             </div>
57             <div class="tr">
58                 <div class="td1">Filler Text</div>
59                 <div class="td1">Filler Text</div>
60                 <div class="td2">This test</div>
61                 <div class="td2">failed.</div>
62             </div>
63         </div>
64      </body>
65 </html>