<head> <style> .one { background-color: cyan; } .two { background-color: yellow; } .three { background-color: lime; } .span { background-color: pink; } td { height: 20px; } </style> <script> function dumpWidths(table) { var cell1 = document.getElementById(table + "-one"); var cell2 = document.getElementById(table + "-two"); document.write("<p>"); document.write("The table width is: " + document.getElementById(table).offsetWidth + "<br>"); document.write("Column One is: " + Math.round(100*cell1.offsetWidth/(cell1.offsetWidth+cell2.offsetWidth)) + "%"); document.write("<br>"); document.write("Column Two is: " + Math.round(100*cell2.offsetWidth/(cell1.offsetWidth+cell2.offsetWidth)) + "%"); document.write("</p><hr>"); } </script> </head> <h1>Fixed Columns, Auto Span, Minwidth Table</h1> <table width="1" id="one" cellpadding=0 cellspacing=0> <tr> <td width=100 id="one-one" class="one"> <td width=200 id="one-two" class="two"> </tr> <tr> <td colspan=2 class="span"> <div style="width:100px"></div> </td> </tr> </table> <script> dumpWidths("one"); </script> <table width="1" id="two" cellpadding=0 cellspacing=0> <tr> <td width=100 id="two-one" class="one"> <td width=200 id="two-two" class="two"> </tr> <tr> <td colspan=2 class="span"> <div style="width:600px"></div> </td> </tr> </table> <script> dumpWidths("two"); </script> <table width="1" id="three" cellpadding=0 cellspacing=0> <tr> <td width=100 id="three-one" class="one">Fixed cell in column one with some text. <td width=200 id="three-two" class="two">Fixed cell in column two with a lot more text. Will the ratios be preserved? </tr> <tr> <td colspan=2 class="span"> <div style="width:600px"></div> </td> </tr> </table> <script> dumpWidths("three"); </script> <table width="1" id="four" cellpadding=0 cellspacing=0> <tr> <td width=50 id="four-one" class="one"><div style="width:100px"></div> <td width=100 id="four-two" class="two"><div style="width:250px"></div> </tr> <tr> <td colspan=2 class="span"> <div style="width:600px"></div> </td> </tr> </table> <script> dumpWidths("four"); </script>