368504-4-ref.html (2354B)
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 /* Set table-width, to replace shrinkwrap */ 13 /* and and min-width on colspanning cell */ 14 table { width: 500px; } 15 16 /* Set %-width on 2nd cell of first row in tables */ 17 table#t0 td.b { width: 1% } 18 table#t1 td.b { width: 5% } 19 table#t2 td.b { width: 10% } 20 table#t3 td.b { width: 30% } 21 table#t4 td.b { width: 50% } 22 table#t5 td.b { width: 75% } 23 table#t6 td.b { width: 80% } 24 table#t7 td.b { width: 90% } 25 table#t8 td.b { width: 95% } 26 table#t9 td.b { width: 100% } 27 28 </style></head> 29 <body> 30 <table id="t0"><tr> 31 <td class="a">foo</td> 32 <td class="b">foo</td> 33 </tr><tr> 34 <td class="c"> </td><td class="c"> </td> 35 </tr></table> 36 37 <table id="t1"><tr> 38 <td class="a">foo</td> 39 <td class="b">foo</td> 40 </tr><tr> 41 <td class="c"> </td><td class="c"> </td> 42 </tr></table> 43 44 <table id="t2"><tr> 45 <td class="a">foo</td> 46 <td class="b">foo</td> 47 </tr><tr> 48 <td class="c"> </td><td class="c"> </td> 49 </tr></table> 50 51 <table id="t3"><tr> 52 <td class="a">foo</td> 53 <td class="b">foo</td> 54 </tr><tr> 55 <td class="c"> </td><td class="c"> </td> 56 </tr></table> 57 58 <table id="t4"><tr> 59 <td class="a">foo</td> 60 <td class="b">foo</td> 61 </tr><tr> 62 <td class="c"> </td><td class="c"> </td> 63 </tr></table> 64 65 <table id="t5"><tr> 66 <td class="a">foo</td> 67 <td class="b">foo</td> 68 </tr><tr> 69 <td class="c"> </td><td class="c"> </td> 70 </tr></table> 71 72 <table id="t6"><tr> 73 <td class="a">foo</td> 74 <td class="b">foo</td> 75 </tr><tr> 76 <td class="c"> </td><td class="c"> </td> 77 </tr></table> 78 79 <table id="t7"><tr> 80 <td class="a">foo</td> 81 <td class="b">foo</td> 82 </tr><tr> 83 <td class="c"> </td><td class="c"> </td> 84 </tr></table> 85 86 <table id="t8"><tr> 87 <td class="a">foo</td> 88 <td class="b">foo</td> 89 </tr><tr> 90 <td class="c"> </td><td class="c"> </td> 91 </tr></table> 92 93 <table id="t9"><tr> 94 <td class="a">foo</td> 95 <td class="b">foo</td> 96 </tr><tr> 97 <td class="c"> </td><td class="c"> </td> 98 </tr></table> 99 </body> 100 </html>