title: How to dynamically adjust the number of rows in a table to pad table elements in bootstrap?
body: <p>I currently have a balance sheet table. On the left hand side is all the assets and the right hand is all the liabilities.  There are short and long-term assets and short and long term liabilities. Currently my table looks like:</p>
  
  <pre><code>Assets                   Liabilities
    Short-term               Long-term
      Cash                     Bond 1
      Accounts Receivable      Bond 2
  
    Long-term
      Plants
  </code></pre>
  
  <p>The number of items under short/long-term asset/liabilities will change over time. So I'm looking for a solution to automatically adjust to the number of items I might have under each category. Is there a easy way in bootstrap to dynamically pad the column such that rows of similar qualities are aligned or do I need to pre-process this in Django first before outputting the results? like this?</p>
  
  <pre><code>Assets                   Liabilities
    Short-term               
      Cash                     
      Accounts Receivable      
  
    Long-term                Long-term
      Plants                   Bond 1
                               Bond 2
  </code></pre>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div id="balance_sheet" class="container-fluid"&gt;
  &lt;div class="container-fluid col-sm-6 right-side"&gt;
  &lt;table style="width:100%"&gt;
      &lt;tr&gt;
          &lt;th&gt; Assets &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;{{ account_receivable_title }}&lt;/th&gt;
          &lt;th&gt;Balance&lt;/th&gt;
      &lt;/tr&gt;
      {% for account_receivable in account_receivables %}
      &lt;tr&gt;
          &lt;td&gt;{{ account_receivable.name }}&lt;/td&gt;
          &lt;td&gt;${{ account_receivable.balance }}&lt;/td&gt;
      &lt;/tr&gt;
      {% endfor %}
  
      &lt;tr&gt;
      &lt;th&gt;{{ account_plant_title }}&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
      {% for account_plant in account_plants %}
      &lt;tr&gt;
      &lt;td&gt;{{ account_plant.name }}&lt;/td&gt;
      &lt;td&gt;${{ account_plant.value }}&lt;/td&gt;
      &lt;/tr&gt;
      {% endfor %}
  
      &lt;tfoot&gt;
      &lt;tr&gt;
      &lt;td&gt;{{ account_total_name }}&lt;/td&gt;
      &lt;td&gt;${{ user_asset_total }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tfoot&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;p&gt;
  &lt;p&gt;
  
  &lt;div class="container-fluid col-sm-6 left-side"&gt;
      &lt;table style="width:100%"&gt;
      &lt;tr&gt;
      &lt;th&gt; Liabilities&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th&gt;{{ account_credit_title }}&lt;/th&gt;
      &lt;th&gt;Balance&lt;/th&gt;
      &lt;/tr&gt;
      {% for account_credit in account_credit %}
      &lt;tr&gt;
      &lt;td&gt;{{ account_credit.name }}&lt;/td&gt;
      &lt;td&gt;${{ account_credit.balance }}&lt;/td&gt;
      &lt;/tr&gt;
      {% endfor %}
  
      &lt;tr&gt;
      &lt;th&gt;{{ account_bond_title }}&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
      {% for account_bond in account_bonds %}
      &lt;tr&gt;
      &lt;td&gt;{{ account_bond.name }}&lt;/td&gt;
      &lt;td&gt;${{ account_bond.balance }}&lt;/td&gt;
      &lt;/tr&gt;
      {% endfor %}
  
      &lt;tfoot&gt;
      &lt;tr&gt;
      &lt;td&gt;{{ account_total_name }}&lt;/td&gt;
      &lt;td&gt;${{ user_liability_total }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tfoot&gt;
  
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>