balancing-2.html (2607B)
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>