|
1 <!DOCTYPE HTML> |
|
2 <html> |
|
3 <head> |
|
4 <title>Balancing of tables (growing)</title> |
|
5 <style type="text/css"> |
|
6 |
|
7 table, td { |
|
8 border: none; |
|
9 margin: 0; |
|
10 padding: 0; |
|
11 border-spacing: 3px; |
|
12 } |
|
13 |
|
14 tr { height: 1.5em; } |
|
15 |
|
16 td { background: black; background: currentColor; } |
|
17 |
|
18 td, span { line-height: 1; } |
|
19 |
|
20 span { |
|
21 display: inline-block; |
|
22 width: 25px; |
|
23 } |
|
24 |
|
25 </style> |
|
26 </head> |
|
27 <body> |
|
28 |
|
29 <!-- |
|
30 cell widths in the first table are: |
|
31 min pref pct |
|
32 25 75 |
|
33 25 25 |
|
34 0 0 |
|
35 25 50* |
|
36 25 25 50% |
|
37 |
|
38 and the table has 18px of horizontal border-spacing |
|
39 |
|
40 pref width of columns is 300px |
|
41 |
|
42 --> |
|
43 |
|
44 <table><tr> |
|
45 <td style="color:aqua"><span></span>​<span></span>​<span></span></td> |
|
46 <td style="color:yellow"><span></span></td> |
|
47 <td style="color:red"></td> |
|
48 <td style="color:fuchsia" width="50"><span></span></td> |
|
49 <td style="color:blue" width="50%"><span></span></td> |
|
50 </tr></table> |
|
51 |
|
52 <table width="518"><tr> |
|
53 <td style="color:aqua"><span></span>​<span></span>​<span></span></td> |
|
54 <td style="color:yellow"><span></span></td> |
|
55 <td style="color:red"></td> |
|
56 <td style="color:fuchsia" width="50"><span></span></td> |
|
57 <td style="color:blue" width="50%"><span></span></td> |
|
58 </tr></table> |
|
59 |
|
60 <!-- XXXdholbert: Change "width: 0px" to width="0px" in next 2 cases --> |
|
61 <table width="438"><tr> |
|
62 <td style="color:aqua" width="75"><span></span>​<span></span>​<span></span></td> |
|
63 <td style="color:yellow" width="25"><span></span></td> |
|
64 <td style="color:red; width: 0px"></td> |
|
65 <td style="color:fuchsia" width="50"><span></span></td> |
|
66 <td style="color:blue" width="50%"><span></span></td> |
|
67 </tr></table> |
|
68 |
|
69 <table width="418"><tr> |
|
70 <td style="color:aqua" width="10%"><span></span></td> |
|
71 <td style="color:yellow" width="10%"><span></span></td> |
|
72 <td style="color:red; width: 0px"></td> |
|
73 <td style="color:fuchsia" width="10%"><span></span></td> |
|
74 <td style="color:blue" width="50%"><span></span></td> |
|
75 </tr></table> |
|
76 |
|
77 <table width="435"><tr> |
|
78 <td style="color:aqua" width="75"><span></span>​<span></span>​<span></span></td> |
|
79 <td style="color:yellow"></td> |
|
80 <td style="color:fuchsia" width="50"><span></span></td> |
|
81 <td style="color:blue" width="50%"><span></span></td> |
|
82 </tr></table> |
|
83 |
|
84 <table width="415"><tr> |
|
85 <td style="color:aqua" width="15%"><span></span></td> |
|
86 <td style="color:yellow"></td> |
|
87 <td style="color:fuchsia" width="15%"><span></span></td> |
|
88 <td style="color:blue" width="50%"><span></span></td> |
|
89 </tr></table> |
|
90 |
|
91 <table width="415"><tr> |
|
92 <td style="color:aqua"></td> |
|
93 <td style="color:yellow"></td> |
|
94 <td style="color:fuchsia"></td> |
|
95 <td style="color:blue"></td> |
|
96 </tr></table> |
|
97 |
|
98 </body> |
|
99 </html> |