445142-1c.html (2695B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html lang="en-US"> 4 <head> 5 <title>table-layout: fixed width distribution with unassigned space</title> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <meta http-equiv="Content-Style-Type" content="text/css"> 8 <style type="text/css"> 9 10 table, td { margin: 0; padding: 0; } 11 12 table { 13 table-layout: fixed; 14 width: 600px; 15 border-spacing: 0; 16 margin-bottom: 2px; 17 } 18 19 td { color: black; background: yellow; } 20 td + td { background: aqua; } 21 td + td + td { background: fuchsia; } 22 23 </style> 24 </head> 25 <body> 26 27 <!-- 28 29 A copy of 445142-1a.html where some cells have colspans. 30 31 --> 32 33 <table> 34 <tr> 35 <td colspan="3" style="width: 100px">100px</td> 36 </tr> 37 </table> 38 39 <table> 40 <tr> 41 <td colspan="2" style="width: 700px">700px</td> 42 </tr> 43 </table> 44 45 <table> 46 <tr> 47 <td colspan="5" style="width: 600px">600px</td> 48 </tr> 49 </table> 50 51 <table> 52 <tr> 53 <td colspan="3" style="width: 100px">100px</td> 54 <td style="width: 200px">200px</td> 55 </tr> 56 </table> 57 58 <table> 59 <tr> 60 <td style="width: 150px">150px</td> 61 <td colspan="2" style="width: 300px">300px</td> 62 </tr> 63 </table> 64 65 <table> 66 <tr> 67 <td colspan="4" style="width: 20%">20%</td> 68 </tr> 69 </table> 70 71 <table> 72 <tr> 73 <td colspan="2" style="width: 100%">100%</td> 74 </tr> 75 </table> 76 77 <table> 78 <tr> 79 <td colspan="3" style="width: 120%">120%</td> 80 </tr> 81 </table> 82 83 <table> 84 <tr> 85 <td colspan="2" style="width: 20%">20%</td> 86 <td style="width: 40%">40%</td> 87 </tr> 88 </table> 89 90 <table> 91 <tr> 92 <td style="width: 30%">30%</td> 93 <td colspan="3" style="width: 60%">60%</td> 94 </tr> 95 </table> 96 97 <table> 98 <tr> 99 <td style="width: 20%">20%</td> 100 <td colspan="4" style="width: 100px">100px</td> 101 </tr> 102 </table> 103 104 <table> 105 <tr> 106 <td colspan="3" style="width: 20%">20%</td> 107 <td style="width: 100px">100px</td> 108 <td><div style="width: 100px">div</div></td> 109 </tr> 110 </table> 111 112 <table> 113 <tr> 114 <td colspan="2" style="width: 20%">20%</td> 115 <td style="width: 0">0</td> 116 </tr> 117 </table> 118 119 <table> 120 <tr> 121 <td style="width: 20%">20%</td> 122 <td colspan="2" style="width: 0%">0%</td> 123 </tr> 124 </table> 125 126 <table> 127 <tr> 128 <td colspan="4" style="width: 100px">100px</td> 129 <td style="width: 0">0</td> 130 </tr> 131 </table> 132 133 <table> 134 <tr> 135 <td style="width: 100px">100px</td> 136 <td colspan="2" style="width: 0%">0%</td> 137 </tr> 138 </table> 139 140 <table> 141 <tr> 142 <td colspan="4" style="width: 0">0</td> 143 <td colspan="4" style="width: 0">0</td> 144 </tr> 145 </table> 146 147 <table> 148 <tr> 149 <td colspan="10" style="width: 0%">0%</td> 150 <td colspan="10" style="width: 0">0</td> 151 </tr> 152 </table> 153 154 </body> 155 </html>