413286-2c.html (1732B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Spanning cell has low percent width</title> 5 <style> 6 table { width: 500px; } 7 td { height: 2em; } 8 td.aqua { background: aqua } 9 td.lime { background: lime } 10 td.blue { background: blue } 11 td.pink { background: pink } 12 td.yellow { background: yellow } 13 14 td.lowPct { width: 10% } 15 td.medPct { width: 40% } 16 td.hiPct { width: 50% } 17 td.specWidth { width: 50px } 18 </style> 19 </head> 20 <body> 21 <h2>No third column</h2> 22 <table cellpadding="0" cellspacing="0"> 23 <tr> 24 <td colspan="2" class="aqua lowPct"></td> 25 </tr><tr> 26 <td class="lime specWidth"></td> 27 <td class="blue"></td> 28 </tr> 29 </table> 30 31 <h2>Third column with low percent width</h2> 32 <table cellpadding="0" cellspacing="0"> 33 <tr> 34 <td colspan="2" class="aqua lowPct"></td> 35 <td class="yellow lowPct"></td> 36 </tr><tr> 37 <td class="lime specWidth"></td> 38 <td class="blue"></td> 39 <td class="pink lowPct"></td> 40 </tr> 41 </table> 42 43 <h2>Third column with medium percent width</h2> 44 <table cellpadding="0" cellspacing="0"> 45 <tr> 46 <td colspan="2" class="aqua lowPct"></td> 47 <td class="yellow medPct"></td> 48 </tr><tr> 49 <td class="lime specWidth"></td> 50 <td class="blue"></td> 51 <td class="pink medPct"></td> 52 </tr> 53 </table> 54 55 <h2>Third column with preferred width</h2> 56 <table cellpadding="0" cellspacing="0"> 57 <tr> 58 <td colspan="2" class="aqua lowPct"></td> 59 <td class="yellow specWidth"></td> 60 </tr><tr> 61 <td class="lime specWidth"></td> 62 <td class="blue"></td> 63 <td class="pink specWidth"></td> 64 </tr> 65 </table> 66 </body> 67 </html>