basic-css-table-001

CSS table display types

WeasyPrint

This browser

Assertion
CSS display table types are supported.

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: CSS table display types</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="">
 8         <meta name="assert" content="CSS display table types are supported.">
 9         <style type="text/css">
10             .table
11             {
12                 display: table;
13                 border: 1px solid gray;
14             }
15             .caption
16             {
17                 display: table-caption;
18                 background: black;
19             }
20             .colgroup
21             {
22                 display: table-column-group;
23             }
24             .col
25             {
26                 display: table-column;
27             }
28             .thead
29             {
30                 display: table-header-group;
31             }
32             .tfoot
33             {
34                 display: table-footer-group;
35             }
36             .tbody
37             {
38                 display: table-row-group;
39             }
40             .tr
41             {
42                 display: table-row;
43             }
44             .td
45             {
46                 background: black;
47                 border: 1px solid gray;
48                 display: table-cell;
49             }
50         </style>
51     </head>
52     <body>
53         <p>Test passes if there is a solid bar on top of a three-by-three grid of boxes below.</p>
54         <div class="table">
55             <div class="caption">X</div>
56             <div class="colgroup">
57                 <div class="col"></div>
58                 <div class="col"></div>
59             </div>
60             <div class="colgroup">
61                 <div class="col"></div>
62             </div>
63             <div class="thead">
64                 <div class="tr">
65                     <div class="td">XXXXX</div>
66                     <div class="td">XXXXX</div>
67                     <div class="td">XXXXX</div>
68                 </div>
69             </div>
70             <div class="tfoot">
71                 <div class="tr">
72                     <div class="td">XXXXX</div>
73                     <div class="td">XXXXX</div>
74                     <div class="td">XXXXX</div>
75                 </div>
76             </div>
77             <div class="tbody">
78                 <div class="tr">
79                     <div class="td">XXXXX</div>
80                     <div class="td">XXXXX</div>
81                     <div class="td">XXXXX</div>
82                 </div>
83             </div>
84         </div>
85     </body>
86 </html>