title: HTML adjust table rows in 1st column to fill height proportionally to 2nd column height
body: <p>I am using a reporting tool, which allows slight customising through HTML.</p>
  <p>Constrains:</p>
  <ul>
  <li>styles only (no CSS)</li>
  <li>tables only (no DIVs)</li>
  </ul>
  <p>This tool will print multiple rows per each student, depending on subject matters, learning objects, etc. In a word, number of rows in the table can vary.</p>
  <p>The issue is, if the 2nd column in the table is higher than the first one, the rows in the first column will not fill height, thus leaving blank space after the last row:
  <img src="https://i.stack.imgur.com/wWgi0.png" alt="Text" /></p>
  <p>What I would like to achieve, is to adjust row heights in 1st column to fill column height proportionally so that there's no extra gap after the last row, <strong>in case the 2nd column is higher than the first one</strong> (see JSFiddle below)</p>
  <p>Report code templates, which could be adjusted somehow:</p>
  <p><strong>Main loop template</strong></p>
  <pre><code>&lt;table class=&quot;no-loop-table&quot; style=&quot;width: 100%;&quot; border=&quot;1&quot;&gt;
     &lt;thead&gt;
        &lt;tr style=&quot;background-color: #ecf1de;&quot;&gt;
           &lt;th style=&quot;padding: 5px; background-color: #ecf1de; text-align: left; width: 70%;&quot; colspan=&quot;2&quot;&gt;&lt;span style=&quot;font-family: 'trebuchet ms', geneva; font-size: small;&quot;&gt;&amp;nbsp; &amp;laquo;&amp;middot;materia&amp;middot;&amp;raquo;&amp;nbsp;&amp;laquo;&amp;middot;materia - breve specifica&amp;middot;&amp;raquo; &amp;laquo;&amp;middot;materia - asterischi&amp;middot;&amp;raquo;&amp;nbsp;&lt;/span&gt;&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td style=&quot;text-align: left; font-size: 12pt; width: 30%;&quot; valign=&quot;top&quot;&gt;&lt;code class=&quot;docband&quot;&gt;LOOP(&quot;band-22&quot;,&quot;/studenti/materie/nuove competenze&quot;)::&amp;nbsp;&lt;span&gt;&amp;laquo;&amp;middot;valore lettere&amp;middot;&amp;raquo; != ''&lt;/span&gt;&lt;/code&gt;&lt;/td&gt;
           &lt;td style=&quot;text-align: justify; padding: 5px;&quot; valign=&quot;top&quot;&gt;&lt;span style=&quot;font-size: medium; font-family: 'trebuchet ms', geneva;&quot;&gt;&amp;laquo;&amp;middot;nota o giudizio&amp;middot;&amp;raquo;&amp;nbsp;&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p><strong>Row template</strong></p>
  <pre><code>&lt;table class=&quot;bottom-line&quot; style=&quot;width: 100%;&quot; border=&quot;1&quot;&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td style=&quot;padding-top: 5px; padding-bottom: 5px; width: 80%; border-right: 1px solid black; text-align: left;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;laquo;&amp;middot;descrizione con a capo&amp;middot;&amp;raquo;&lt;/span&gt;&lt;/td&gt;
           &lt;td style=&quot;padding-left: 8%; padding-top: 5px; padding-bottom: 5px; width: 20%;&quot;&gt;&lt;span style=&quot;font-family: 'trebuchet ms', geneva; font-size: medium;&quot;&gt;&lt;strong&gt;&amp;laquo;&amp;middot;valore sigla&amp;middot;&amp;raquo;&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;p&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/p&gt;
  </code></pre>
  <p><strong>Generated output</strong> by reporting tool:</p>
  <pre><code>&lt;table class=&quot;no-loop-table&quot; style=&quot;width: 100%;&quot; border=&quot;1&quot;&gt;
     &lt;thead&gt;
        &lt;tr style=&quot;background-color: #ecf1de;&quot;&gt;
           &lt;th style=&quot;padding: 5px; background-color: #ecf1de; text-align: left; width: 70%;&quot; colspan=&quot;2&quot;&gt;&lt;span style=&quot;font-family: 'trebuchet ms', geneva; font-size: small;&quot;&gt;&amp;nbsp; INGLESE&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td style=&quot;text-align: left; font-size: 12pt; width: 30%;&quot; valign=&quot;top&quot;&gt;
              &lt;table class=&quot;bottom-line&quot; style=&quot;width: 100%;&quot; border=&quot;1&quot;&gt;
                 &lt;tbody&gt;
                    &lt;tr&gt;
                       &lt;td style=&quot;padding-top: 5px; padding-bottom: 5px; width: 80%; border-right: 1px solid black; text-align: left;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;Ascolto (comprensione orale)&lt;/span&gt;&lt;/td&gt;
                       &lt;td style=&quot;padding-left: 8%; padding-top: 5px; padding-bottom: 5px; width: 20%;&quot;&gt;&lt;span style=&quot;font-family: 'trebuchet ms', geneva; font-size: medium;&quot;&gt;&lt;strong&gt;C&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                       &lt;td style=&quot;padding-top: 5px; padding-bottom: 5px; width: 80%; border-right: 1px solid black; text-align: left;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;Parlato (produzione e interazione orale)&lt;/span&gt;&lt;/td&gt;
                       &lt;td style=&quot;padding-left: 8%; padding-top: 5px; padding-bottom: 5px; width: 20%;&quot;&gt;&lt;span style=&quot;font-family: 'trebuchet ms', geneva; font-size: medium;&quot;&gt;&lt;strong&gt;A&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                       &lt;td style=&quot;padding-top: 5px; padding-bottom: 5px; width: 80%; border-right: 1px solid black; text-align: left;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;Lettura (comprensione scritta)&lt;/span&gt;&lt;/td&gt;
                       &lt;td style=&quot;padding-left: 8%; padding-top: 5px; padding-bottom: 5px; width: 20%;&quot;&gt;&lt;span style=&quot;font-family: 'trebuchet ms', geneva; font-size: medium;&quot;&gt;&lt;strong&gt;C&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                       &lt;td style=&quot;padding-top: 5px; padding-bottom: 5px; width: 80%; border-right: 1px solid black; text-align: left;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;Ascolto (comprensione orale)&lt;/span&gt;&lt;/td&gt;
                       &lt;td style=&quot;padding-left: 8%; padding-top: 5px; padding-bottom: 5px; width: 20%;&quot;&gt;&lt;span style=&quot;font-family: 'trebuchet ms', geneva; font-size: medium;&quot;&gt;&lt;strong&gt;C&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                       &lt;td style=&quot;padding-top: 5px; padding-bottom: 5px; width: 80%; border-right: 1px solid black; text-align: left;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;Parlato (produzione e interazione orale)&lt;/span&gt;&lt;/td&gt;
                       &lt;td style=&quot;padding-left: 8%; padding-top: 5px; padding-bottom: 5px; width: 20%;&quot;&gt;&lt;span style=&quot;font-family: 'trebuchet ms', geneva; font-size: medium;&quot;&gt;&lt;strong&gt;A&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                       &lt;td style=&quot;padding-top: 5px; padding-bottom: 5px; width: 80%; border-right: 1px solid black; text-align: left;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;Lettura (comprensione scritta)&lt;/span&gt;&lt;/td&gt;
                       &lt;td style=&quot;padding-left: 8%; padding-top: 5px; padding-bottom: 5px; width: 20%;&quot;&gt;&lt;span style=&quot;font-family: 'trebuchet ms', geneva; font-size: medium;&quot;&gt;&lt;strong&gt;C&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                 &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;p&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/p&gt;
           &lt;/td&gt;
           &lt;td style=&quot;text-align: justify; padding: 5px;&quot; valign=&quot;top&quot;&gt;&lt;span style=&quot;font-size: medium; font-family: 'trebuchet ms', geneva;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis a sapien sit amet hendrerit. Nam cursus erat at magna mattis consequat. Vestibulum sed quam non massa tristique fringilla. Morbi sagittis tincidunt nibh sit amet sodales. Donec vitae ligula felis. Mauris eu tincidunt leo. Pellentesque placerat nisl in nibh elementum, egestas tincidunt eros consequat. Quisque faucibus iaculis eros, nec hendrerit odio tempus sollicitudin. Proin in porta metus. Integer imperdiet mattis leo et consectetur. Duis lacinia scelerisque laoreet. Cras molestie tellus vel libero porta ornare. Integer tincidunt viverra suscipit. Mauris non pellentesque nisi. Nullam commodo, mi in vestibulum tincidunt, diam odio congue metus, quis lacinia enim est ac lacus. Donec ipsum nibh, vehicula sed metus sit amet, fringilla bibendum odio. Suspendisse vel ultrices eros. Duis vel tortor rutrum, pharetra nulla at, molestie ex. Proin tincidunt lectus sit amet metus feugiat iaculis. In hac habitasse platea dictumst. Fusce mollis tristique ligula suscipit luctus. Sed sed nibh vitae diam mollis pretium nec in nisi. Aenean auctor interdum efficitur. Donec id aliquam nunc.
              &lt;/span&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/kf0u458c/" rel="nofollow noreferrer">https://jsfiddle.net/kf0u458c/</a></p>