368504-4.html (2589B)
1 <html> 2 <head><style> 3 /* cellspacing=0 cellpadding=0 */ 4 table { border-spacing: 0 } 5 td, th { padding: 0 } 6 7 /* Colors for the three cell types */ 8 td.a { background: lightgreen; } 9 td.b { background: yellow; } 10 td.c { background: blue; } 11 12 /* Shrink-wrapping div */ 13 div.shrinkwrap { width: 1px; } 14 15 /* Set min-width on colspanning cell */ 16 td.c { min-width: 500px; } 17 18 /* Set %-width on 2nd cell of first row in tables */ 19 table#t0 td.b { width: 1% } 20 table#t1 td.b { width: 5% } 21 table#t2 td.b { width: 10% } 22 table#t3 td.b { width: 30% } 23 table#t4 td.b { width: 50% } 24 table#t5 td.b { width: 75% } 25 table#t6 td.b { width: 80% } 26 table#t7 td.b { width: 90% } 27 table#t8 td.b { width: 95% } 28 table#t9 td.b { width: 100% } 29 30 </style></head> 31 <body> 32 <div class="shrinkwrap"> 33 <table id="t0"><tr> 34 <td class="a">foo</td> 35 <td class="b">foo</td> 36 </tr><tr> 37 <td class="c" colspan="2"> </td> 38 </tr></table> 39 </div> 40 41 <div class="shrinkwrap"> 42 <table id="t1"><tr> 43 <td class="a">foo</td> 44 <td class="b">foo</td> 45 </tr><tr> 46 <td class="c" colspan="2"> </td> 47 </tr></table> 48 </div> 49 50 <div class="shrinkwrap"> 51 <table id="t2"><tr> 52 <td class="a">foo</td> 53 <td class="b">foo</td> 54 </tr><tr> 55 <td class="c" colspan="2"> </td> 56 </tr></table> 57 </div> 58 59 <div class="shrinkwrap"> 60 <table id="t3"><tr> 61 <td class="a">foo</td> 62 <td class="b">foo</td> 63 </tr><tr> 64 <td class="c" colspan="2"> </td> 65 </tr></table> 66 </div> 67 68 <div class="shrinkwrap"> 69 <table id="t4"><tr> 70 <td class="a">foo</td> 71 <td class="b">foo</td> 72 </tr><tr> 73 <td class="c" colspan="2"> </td> 74 </tr></table> 75 </div> 76 77 <div class="shrinkwrap"> 78 <table id="t5"><tr> 79 <td class="a">foo</td> 80 <td class="b">foo</td> 81 </tr><tr> 82 <td class="c" colspan="2"> </td> 83 </tr></table> 84 </div> 85 86 <div class="shrinkwrap"> 87 <table id="t6"><tr> 88 <td class="a">foo</td> 89 <td class="b">foo</td> 90 </tr><tr> 91 <td class="c" colspan="2"> </td> 92 </tr></table> 93 </div> 94 95 <div class="shrinkwrap"> 96 <table id="t7"><tr> 97 <td class="a">foo</td> 98 <td class="b">foo</td> 99 </tr><tr> 100 <td class="c" colspan="2"> </td> 101 </tr></table> 102 </div> 103 104 <div class="shrinkwrap"> 105 <table id="t8"><tr> 106 <td class="a">foo</td> 107 <td class="b">foo</td> 108 </tr><tr> 109 <td class="c" colspan="2"> </td> 110 </tr></table> 111 </div> 112 113 <div class="shrinkwrap"> 114 <table id="t9"><tr> 115 <td class="a">foo</td> 116 <td class="b">foo</td> 117 </tr><tr> 118 <td class="c" colspan="2"> </td> 119 </tr></table> 120 </div> 121 </body> 122 </html>