| |
| <head> |
| <style> |
| .one { |
| background-color: cyan; |
| } |
| |
| .two { |
| background-color: yellow; |
| } |
| |
| .three { |
| background-color: lime; |
| } |
| |
| .span { |
| background-color: pink; |
| } |
| |
| td { |
| width: 20px; |
| } |
| |
| table { |
| -webkit-writing-mode: vertical-rl; |
| } |
| </style> |
| |
| <script> |
| function dumpHeights(table) |
| { |
| var cell1 = document.getElementById(table + "-one"); |
| var cell2 = document.getElementById(table + "-two"); |
| document.write("<p>"); |
| document.write("The table height is: " + document.getElementById(table).offsetHeight + "<br>"); |
| document.write("Column One is: " + Math.round(100*cell1.offsetHeight/(cell1.offsetHeight+cell2.offsetHeight)) + "%"); |
| document.write("<br>"); |
| document.write("Column Two is: " + Math.round(100*cell2.offsetHeight/(cell1.offsetHeight+cell2.offsetHeight)) + "%"); |
| document.write("</p><hr>"); |
| } |
| </script> |
| </head> |
| |
| <h1>Fixed Columns, Auto Span, Minheight Table</h1> |
| |
| <table height="1" id="one" cellpadding=0 cellspacing=0> |
| <tr> |
| <td height=100 id="one-one" class="one"> |
| <td height=200 id="one-two" class="two"> |
| </tr> |
| <tr> |
| <td colspan=2 class="span"> |
| <div style="height:100px"></div> |
| </td> |
| </tr> |
| </table> |
| |
| <script> |
| dumpHeights("one"); |
| </script> |
| |
| <table height="1" id="two" cellpadding=0 cellspacing=0> |
| <tr> |
| <td height=100 id="two-one" class="one"> |
| <td height=200 id="two-two" class="two"> |
| </tr> |
| <tr> |
| <td colspan=2 class="span"> |
| <div style="height:600px"></div> |
| </td> |
| </tr> |
| </table> |
| |
| <script> |
| dumpHeights("two"); |
| </script> |
| |
| <table height="1" id="three" cellpadding=0 cellspacing=0> |
| <tr> |
| <td height=100 id="three-one" class="one">Fixed cell in column one with some text. |
| <td height=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="height:600px"></div> |
| </td> |
| </tr> |
| </table> |
| |
| <script> |
| dumpHeights("three"); |
| </script> |
| |
| <table height="1" id="four" cellpadding=0 cellspacing=0> |
| <tr> |
| <td height=50 id="four-one" class="one"><div style="height:100px"></div> |
| <td height=100 id="four-two" class="two"><div style="height:250px"></div> |
| </tr> |
| <tr> |
| <td colspan=2 class="span"> |
| <div style="height:600px"></div> |
| </td> |
| </tr> |
| </table> |
| |
| <script> |
| dumpHeights("four"); |
| </script> |
