100% height inner table

I'm sending multiple emails. Part of their shared layout requires a white and yellow design on the left hand side. table1 does not have a fixed height as there will b开发者_运维技巧e different content depending on the email being sent. How can I get table2 to completely fill out height-wise? I'm using third party software to generate the html, so "fancy" inline CSS is a no-go.

<table name="table1">
  <tr>
    <td>
      <table height="100%" name="table2">
        <tr>
          <td height="100%" width="10px" bgcolor="white"></td>
          <td height="100%" width="30px" bgcolor="yellow"></td>
        </tr>
      </table>
    </td>
    <td>
      text that can so on and on and on...</br>
      more text</br>
      even more.</br>
    </td>
  </tr>
</table>

If you want to stretch the whole height why dont you loose table 2 and do something like:

<table name="table1">
  <tr> 
    <td width="10px" bgcolor="white"></td>
    <td width="30px" bgcolor="yellow"></td>     
    <td>
      text that can so on and on and on...<br/>
      more text<br/>
      even more.<br/>
    </td>
  </tr>
</table>

Or do I misunderstand your question?

What about changing the first <td> tag (which holds table2) to be <td height="100%"> ? That way the cell's height is at maximum, not just the table's.

You can do that with JavaScript

<table> 
  <tr> 
    <td id="td1"> 
      <table bgcolor="red" id="table1"> 
        <tr> 
          <td width="10px" bgcolor="white">s </td> 
          <td width="30px" bgcolor="yellow">s </td> 
        </tr> 
      </table> 
    </td> 
    <td> 
      text that can so on and on and on...</br> 
      more text</br> 
      even more.</br> 
    </td> 
  </tr> 
</table> 
<script> 
    document.getElementById("table1").style.height = document.getElementById("td1").offsetHeight + "px";
</script>