445142-2-ref.html (2501B)
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 border-spacing: 10px 0; 14 margin-bottom: 2px; 15 padding: 0 10px; 16 } 17 18 td { color: black; background: yellow; } 19 td + td { background: aqua; } 20 td + td + td { background: fuchsia; } 21 22 </style> 23 </head> 24 <body> 25 26 <table> 27 <tr> 28 <td style="width: 460px">100px</td> 29 </tr> 30 </table> 31 32 <table> 33 <tr> 34 <td style="width: 500px">500px</td> 35 </tr> 36 </table> 37 38 <table> 39 <tr> 40 <td style="width: 600px">600px</td> 41 </tr> 42 </table> 43 44 <table> 45 <tr> 46 <td style="width: 150px">100px</td> 47 <td style="width: 300px">200px</td> 48 </tr> 49 </table> 50 51 <table> 52 <tr> 53 <td style="width: 150px">150px</td> 54 <td style="width: 300px">300px</td> 55 </tr> 56 </table> 57 58 <table> 59 <tr> 60 <td style="width: 460px">20%</td> 61 </tr> 62 </table> 63 64 <table> 65 <tr> 66 <td style="width: 460px">100%</td> 67 </tr> 68 </table> 69 70 <table> 71 <tr> 72 <td style="width: 460px">120%</td> 73 </tr> 74 </table> 75 76 <table> 77 <tr> 78 <td style="width: 150px">20%</td> 79 <td style="width: 300px">40%</td> 80 </tr> 81 </table> 82 83 <table> 84 <tr> 85 <td style="width: 150px">30%</td> 86 <td style="width: 300px">60%</td> 87 </tr> 88 </table> 89 90 <table> 91 <tr> 92 <td style="width: 90px">20%</td> 93 <td style="width: 360px">100px</td> 94 </tr> 95 </table> 96 97 <table> 98 <tr> 99 <td style="width: 88px">20%</td> 100 <td style="width: 100px">100px</td> 101 <td style="width: 252px">div</td> 102 </tr> 103 </table> 104 105 <table> 106 <tr> 107 <td style="width: 450px">20%</td> 108 <td style="width: 0"><div style="width: 0">0</div></td> 109 </tr> 110 </table> 111 112 <table> 113 <tr> 114 <td style="width: 450px">20%</td> 115 <td style="width: 0"><div style="width: 0">0%</div></td> 116 </tr> 117 </table> 118 119 <table> 120 <tr> 121 <td style="width: 450px">100px</td> 122 <td style="width: 0"><div style="width: 0">0</div></td> 123 </tr> 124 </table> 125 126 <table> 127 <tr> 128 <td style="width: 450px">100px</td> 129 <td style="width: 0"><div style="width: 0">0%</div></td> 130 </tr> 131 </table> 132 133 <table> 134 <tr> 135 <td style="width: 225px">0</td> 136 <td style="width: 225px">0</td> 137 </tr> 138 </table> 139 140 <table> 141 <tr> 142 <td style="width: 225px">0%</td> 143 <td style="width: 225px">0</td> 144 </tr> 145 </table> 146 147 </body> 148 </html>