445142-2a.html (2408B)
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 <table> 29 <tr> 30 <td style="width: 100px">100px</td> 31 </tr> 32 </table> 33 34 <table> 35 <tr> 36 <td style="width: 500px">500px</td> 37 </tr> 38 </table> 39 40 <table> 41 <tr> 42 <td style="width: 600px">600px</td> 43 </tr> 44 </table> 45 46 <table> 47 <tr> 48 <td style="width: 100px">100px</td> 49 <td style="width: 200px">200px</td> 50 </tr> 51 </table> 52 53 <table> 54 <tr> 55 <td style="width: 150px">150px</td> 56 <td style="width: 300px">300px</td> 57 </tr> 58 </table> 59 60 <table> 61 <tr> 62 <td style="width: 20%">20%</td> 63 </tr> 64 </table> 65 66 <table> 67 <tr> 68 <td style="width: 100%">100%</td> 69 </tr> 70 </table> 71 72 <table> 73 <tr> 74 <td style="width: 120%">120%</td> 75 </tr> 76 </table> 77 78 <table> 79 <tr> 80 <td style="width: 20%">20%</td> 81 <td style="width: 40%">40%</td> 82 </tr> 83 </table> 84 85 <table> 86 <tr> 87 <td style="width: 30%">30%</td> 88 <td style="width: 60%">60%</td> 89 </tr> 90 </table> 91 92 <table> 93 <tr> 94 <td style="width: 20%">20%</td> 95 <td style="width: 100px">100px</td> 96 </tr> 97 </table> 98 99 <table> 100 <tr> 101 <td style="width: 20%">20%</td> 102 <td style="width: 100px">100px</td> 103 <td><div style="width: 100px">div</div></td> 104 </tr> 105 </table> 106 107 <table> 108 <tr> 109 <td style="width: 20%">20%</td> 110 <td style="width: 0">0</td> 111 </tr> 112 </table> 113 114 <table> 115 <tr> 116 <td style="width: 20%">20%</td> 117 <td style="width: 0%">0%</td> 118 </tr> 119 </table> 120 121 <table> 122 <tr> 123 <td style="width: 100px">100px</td> 124 <td style="width: 0">0</td> 125 </tr> 126 </table> 127 128 <table> 129 <tr> 130 <td style="width: 100px">100px</td> 131 <td style="width: 0%">0%</td> 132 </tr> 133 </table> 134 135 <table> 136 <tr> 137 <td style="width: 0">0</td> 138 <td style="width: 0">0</td> 139 </tr> 140 </table> 141 142 <table> 143 <tr> 144 <td style="width: 0%">0%</td> 145 <td style="width: 0">0</td> 146 </tr> 147 </table> 148 149 </body> 150 </html>