title: Adding last row of table rowspan attribute doesnt work
body: <p>I'm using twitter bootstrap but i dont think that makes a difference to what I'm doing.  </p>
  
  <p>Basically I have a table.  I'm testing the length of an enumerable that is filling the table and the last row i want to "pad" to the full length of the container i.e. if its less than 10 rows i want to add a row that has a rowspan that is 10 - item.count...  however, its just rendering a blank row... is this intentional or am i doing something wrong? Here is a fiddle:</p>
  
  <p><a href="http://jsfiddle.net/L46FX/37/" rel="nofollow">http://jsfiddle.net/L46FX/37/</a></p>
  
  <p>and here is a table... any help would be appreciated...</p>
  
  <pre><code>&lt;table class="table table-bordered"&gt;
     &lt;thead&gt;
        &lt;tr&gt;
           &lt;th&gt;#&lt;/th&gt;
           &lt;th&gt;First Name&lt;/th&gt;
           &lt;th&gt;Last Name&lt;/th&gt;
           &lt;th&gt;Username&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td rowspan="2"&gt;1&lt;/td&gt;
           &lt;td&gt;Mark&lt;/td&gt;
           &lt;td&gt;Otto&lt;/td&gt;
           &lt;td&gt;@mdo&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Mark&lt;/td&gt;
           &lt;td&gt;Otto&lt;/td&gt;
           &lt;td&gt;@TwBootstrap&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;2&lt;/td&gt;
           &lt;td&gt;Jacob&lt;/td&gt;
           &lt;td&gt;Thornton&lt;/td&gt;
           &lt;td&gt;@fat&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;3&lt;/td&gt;
           &lt;td colspan="2"&gt;Larry the Bird&lt;/td&gt;
           &lt;td&gt;@twitter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td colspan="4" rowspan="10"&gt;
             this should be a row that is 10 rows long...
          &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>As suggested, javascript seems to be the answer... this is what I came up with, it tests the line-height due to the fact my tables are in a tab so the height attribute came back with 0 because they weren't currently in a active tab.. </p>
  
  <pre><code> $('.stretch').each(function () {
              var rows = $(this).rowCount();
              if (rows &lt; 10) {
                  var lr = $(this).children('tbody').children('tr:last');
                  var bg = lr.children('td').first().css('background-color');
                  var ht = lr.css('line-height').replace('px', '') * (10 - rows);
                  var row = '&lt;td colspan="' + lr.children('td').length + '"&gt;&lt;/td&gt;';
                  $(this).children('tbody').append('&lt;tr style="height: ' + ht + 'px; background-color: ' + bg + '"&gt;' + row + '&lt;/tr&gt;');
              }
          });
  </code></pre>
  
  <p>Also to clarify what I was doing... I really hate it when a table renders 1 row, it just looks so ugly :)  I tend to put action items for the table in the footer so this attempts to fill the container with a giant row and anchors the tfoot to the bottom of the parent or very close to it....</p>