407243-1.html (2262B)
1 <html> 2 <!-- This testcase asserts that in all the tables below, all 500px of the -- 3 -- orange colspanning cell's specified width should go to its first -- 4 -- spanned column. Its second spanned column receives none of the -- 5 -- 500px, and it only gets a small amount of width by taking half of the -- 6 -- light-blue cell's preferred width. -- 7 -- -- 8 -- This happens because the first column starts with nonzero pref-width, -- 9 -- whereas the second and third columns have zero pref-width. Hence, -- 10 -- the orange colspanning cell favors the first column over the second, -- 11 -- whereas the lightblue colspanning cell distributes its width equally -- 12 -- between the second and third columns. --> 13 <head><style> 14 tr { height: 1em; } 15 td.wide { width: 500px; } 16 17 td.orange { background: orange; } 18 td.purple { background: purple; } 19 td.teal { background: teal; } 20 td.blue { background: lightblue; } 21 </style></head> 22 <body> 23 <p>(x,x) labels indicate the column & row order of the orange cell.</p> 24 25 <br/>(0,0) 26 <table cellpadding="0" cellspacing="0"> 27 <tr> 28 <td class="orange wide" colspan="2"></td> 29 <td class="purple"></td> 30 </td> 31 </tr><tr> 32 <td class="teal">x</td> 33 <td class="blue" colspan="2">y z</td> 34 </tr> 35 </table> 36 37 <br/>(0,1) 38 <table cellpadding="0" cellspacing="0"> 39 <tr> 40 <td class="teal">x</td> 41 <td class="blue" colspan="2">y z</td> 42 </td> 43 </tr><tr> 44 <td class="orange wide" colspan="2"></td> 45 <td class="purple"></td> 46 </tr> 47 </table> 48 49 <br/>(1,0) 50 <table cellpadding="0" cellspacing="0"> 51 <tr> 52 <td class="purple"></td> 53 <td class="orange wide" colspan="2"></td> 54 </td> 55 </tr><tr> 56 <td class="blue" colspan="2">y z</td> 57 <td class="teal">x</td> 58 </tr> 59 </table> 60 61 <br/>(1,1) 62 <table cellpadding="0" cellspacing="0"> 63 <tr> 64 <td class="blue" colspan="2">y z</td> 65 <td class="teal">x</td> 66 </td> 67 </tr><tr> 68 <td class="purple"></td> 69 <td class="orange wide" colspan="2"></td> 70 </tr> 71 </table> 72 </body> 73 </html>