|
1 <!DOCTYPE HTML> |
|
2 <html> |
|
3 <head> |
|
4 <title>Balancing of tables (shrinking)</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: 4em; } |
|
15 |
|
16 td { background: black; background: currentColor; } |
|
17 |
|
18 body { width: 900px; } |
|
19 |
|
20 </style> |
|
21 </head> |
|
22 <body> |
|
23 |
|
24 <!-- |
|
25 cell widths are: |
|
26 min pref pct |
|
27 50 150 |
|
28 50 50 |
|
29 50 100* |
|
30 50 50 50% |
|
31 |
|
32 and the table has 15px of horizontal border-spacing |
|
33 |
|
34 sizing to col width total |
|
35 min 200 |
|
36 min/pct 300 |
|
37 min/spec 400 |
|
38 pref 600 |
|
39 |
|
40 --> |
|
41 |
|
42 <!-- width: 200px --><table><tr> |
|
43 <td style="color:aqua" width="50"> </td> |
|
44 <td style="color:yellow" width="50"> </td> |
|
45 <td style="color:fuchsia" width="50"> </td> |
|
46 <td style="color:blue" width="50"> </td> |
|
47 </tr></table> |
|
48 |
|
49 <!-- width: 250px --><table><tr> |
|
50 <td style="color:aqua" width="50"> </td> |
|
51 <td style="color:yellow" width="50"> </td> |
|
52 <td style="color:fuchsia" width="50"> </td> |
|
53 <td style="color:blue" width="100"> </td> |
|
54 </tr></table> |
|
55 |
|
56 <!-- width: 300px --><table><tr> |
|
57 <td style="color:aqua" width="50"> </td> |
|
58 <td style="color:yellow" width="50"> </td> |
|
59 <td style="color:fuchsia" width="50"> </td> |
|
60 <td style="color:blue" width="150"> </td> |
|
61 </tr></table> |
|
62 |
|
63 <!-- width: 350px --><table><tr> |
|
64 <td style="color:aqua" width="50"> </td> |
|
65 <td style="color:yellow" width="50"> </td> |
|
66 <td style="color:fuchsia" width="75"> </td> |
|
67 <td style="color:blue" width="175"> </td> |
|
68 </tr></table> |
|
69 |
|
70 <!-- width: 400px --><table><tr> |
|
71 <td style="color:aqua" width="50"> </td> |
|
72 <td style="color:yellow" width="50"> </td> |
|
73 <td style="color:fuchsia" width="100"> </td> |
|
74 <td style="color:blue" width="200"> </td> |
|
75 </tr></table> |
|
76 |
|
77 <!-- width: 500px --><table><tr> |
|
78 <td style="color:aqua" width="100"> </td> |
|
79 <td style="color:yellow" width="50"> </td> |
|
80 <td style="color:fuchsia" width="100"> </td> |
|
81 <td style="color:blue" width="250"> </td> |
|
82 </tr></table> |
|
83 |
|
84 <!-- width: 600px --><table><tr> |
|
85 <td style="color:aqua" width="150"> </td> |
|
86 <td style="color:yellow" width="50"> </td> |
|
87 <td style="color:fuchsia" width="100"> </td> |
|
88 <td style="color:blue" width="300"> </td> |
|
89 </tr></table> |
|
90 |
|
91 <!-- width: 800px --><table><tr> |
|
92 <td style="color:aqua" width="225"> </td> |
|
93 <td style="color:yellow" width="75"> </td> |
|
94 <td style="color:fuchsia" width="100"> </td> |
|
95 <td style="color:blue" width="400"> </td> |
|
96 </tr></table> |
|
97 |
|
98 </body> |
|
99 </html> |