445142-2b.html (2818B)
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: 500px; 15 border-spacing: 10px 0; 16 margin-bottom: 2px; 17 padding: 0 10px; 18 } 19 20 td { color: black; background: yellow; } 21 td + td { background: aqua; } 22 td + td + td { background: fuchsia; } 23 24 </style> 25 </head> 26 <body> 27 28 <!-- 29 30 A copy of 445142-1a.html where one of the widths is specified on a col 31 instead of a td. 32 33 --> 34 35 <table> 36 <col style="width: 100px"> 37 <tr> 38 <td>100px</td> 39 </tr> 40 </table> 41 42 <table> 43 <col style="width: 500px"> 44 <tr> 45 <td>500px</td> 46 </tr> 47 </table> 48 49 <table> 50 <col style="width: 600px"> 51 <tr> 52 <td>600px</td> 53 </tr> 54 </table> 55 56 <table> 57 <col> 58 <col style="width: 200px"> 59 <tr> 60 <td style="width: 100px">100px</td> 61 <td>200px</td> 62 </tr> 63 </table> 64 65 <table> 66 <col style="width: 150px"> 67 <col> 68 <tr> 69 <td style="width: 9999px">150px</td> 70 <td style="width: 300px">300px</td> 71 </tr> 72 </table> 73 74 <table> 75 <col style="width: 20%"> 76 <tr> 77 <td>20%</td> 78 </tr> 79 </table> 80 81 <table> 82 <col style="width: 100%"> 83 <tr> 84 <td>100%</td> 85 </tr> 86 </table> 87 88 <table> 89 <col style="width: 120%"> 90 <tr> 91 <td>120%</td> 92 </tr> 93 </table> 94 95 <table> 96 <col style="width: 20%"> 97 <col> 98 <tr> 99 <td>20%</td> 100 <td style="width: 40%">40%</td> 101 </tr> 102 </table> 103 104 <table> 105 <col> 106 <col style="width: 60%"> 107 <tr> 108 <td style="width: 30%">30%</td> 109 <td style="width: 9999px">60%</td> 110 </tr> 111 </table> 112 113 <table> 114 <col style="width: 20%"> 115 <col> 116 <tr> 117 <td>20%</td> 118 <td style="width: 100px">100px</td> 119 </tr> 120 </table> 121 122 <table> 123 <col> 124 <col style="width: 100px"> 125 <col> 126 <tr> 127 <td style="width: 20%">20%</td> 128 <td style="width: 5%">100px</td> 129 <td><div style="width: 100px">div</div></td> 130 </tr> 131 </table> 132 133 <table> 134 <col style="width: 20%"> 135 <col> 136 <tr> 137 <td>20%</td> 138 <td style="width: 0">0</td> 139 </tr> 140 </table> 141 142 <table> 143 <col> 144 <col style="width: 0%"> 145 <tr> 146 <td style="width: 20%">20%</td> 147 <td>0%</td> 148 </tr> 149 </table> 150 151 <table> 152 <col> 153 <col style="width: 0"> 154 <tr> 155 <td style="width: 100px">100px</td> 156 <td>0</td> 157 </tr> 158 </table> 159 160 <table> 161 <col style="width: 100px"> 162 <col> 163 <tr> 164 <td>100px</td> 165 <td style="width: 0%">0%</td> 166 </tr> 167 </table> 168 169 <table> 170 <col style="width: 0"> 171 <col> 172 <tr> 173 <td>0</td> 174 <td style="width: 0">0</td> 175 </tr> 176 </table> 177 178 <table> 179 <col> 180 <col style="width: 0"> 181 <tr> 182 <td style="width: 0%">0%</td> 183 <td>0</td> 184 </tr> 185 </table> 186 187 </body> 188 </html>