| |
| <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> |
