fixed-table-layout-005

Leftover table width is divided evenly among auto-sized columns

WeasyPrint

This browser

Assertion
Any remaining horizontal table space is divided evenly among columns which do not have specified widths.

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: Leftover table width is divided evenly among auto-sized columns</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#fixed-table-layout">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="Any remaining horizontal table space is divided evenly among columns which do not have specified widths.">
 9         <style type="text/css">
10             table
11             {
12                 border-spacing: 0;
13                 table-layout: fixed;
14                 width: 300px;
15             }
16             #col1
17             {
18                 width: 50px;
19             }
20             td
21             {
22                 padding: 0;
23             }
24             #cell1
25             {
26                 width: 50px;
27             }
28             #cell2
29             {
30                 width: 100px;
31             }
32             #div1
33             {
34                 border-top: 1px solid black;
35                 height: 100px;
36                 width: 300px;
37             }
38             #div1 > div
39             {
40                 float: left;
41             }
42             .px50
43             {
44                 width: 50px;
45             }
46             #px100
47             {
48                 width: 100px;
49             }
50         </style>
51     </head>
52     <body>
53         <p>Test passes if the numbers above the line are aligned with the numbers below the line.</p>
54         <table>
55             <col id="col1">
56             <col>
57             <col>
58             <col>
59             <col>
60             <col>
61             <tr>
62                 <td>1</td>
63                 <td id="cell1">2</td>
64                 <td id="cell2" colspan="2">3</td>
65                 <td>4</td>
66                 <td>5</td>
67            </tr>
68         </table>
69         <div id="div1">
70             <div class="px50">1</div>
71             <div class="px50">2</div>
72             <div id="px100">3</div>
73             <div class="px50">4</div>
74             <div class="px50">5</div>
75         </div>
76     </body>
77 </html>