title: filling up a table empty rows with a border css
body: <p>So I have a designated area for a table, and sometimes the table doesn't get filled up completely to the bottom of that area after reading from database. For the empty spaces I want to have a border around it connecting to the table, so it looks like the table is all the way to the bottom but the remaining space will just be a big empty space enclosed by a border (looks like it's part of the table)</p>
  
  <p>Any tips on how to do that? prefer to use only css</p>
  
  <p>code:</p>
  
  <pre><code>    &lt;div class="col-md-11" style="width:86%"&gt;
          &lt;div class="table-responsive user-table" style="overflow-y:auto; overflow-x:hidden"&gt;
              &lt;table class="table table-striped table-bordered" id="table_{{table.name}}"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th ng-repeat="header in table.headers track by $index" style="background-color: #0D3C47; color:white"&gt;
                              &lt;div data-ng-if="header.type !== 'checkbox'"&gt;{{header}}&lt;/div&gt;
                              &lt;div data-ng-if="header.type === 'checkbox'"&gt;{{header.value}}&lt;/div&gt;
                          &lt;/th&gt;
  
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr ng-repeat="row in table.rows track by $index"&gt;
                          @*&lt;tr ng-repeat="row in table.rows | activeOrNot: table.checkboxCol: table.filterIsEnabled track by $index"&gt;*@
  
                          &lt;td ng-repeat="item in row | filter: {type: '!GUID'} track by $index "
                              ng-click="table.selectedRow(row)"
                              ng-class="{ 'highlight' : row === table.selected}"&gt;
  
                              &lt;div data-ng-if="item.type === undefined"&gt;{{item}}&lt;/div&gt;
                              &lt;div data-ng-if="item.type === 'checkbox'"&gt;
                                  &lt;input type="checkbox" ng-checked="item.checked" ng-disabled="true"&gt;
                              &lt;/div&gt;
                              &lt;div data-ng-if="item.type === 'GUID'"&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
          &lt;table class="table table-striped table-bordered"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class="text-right" style="padding-right: 30px; font-size: 15px"&gt;
                          &lt;div&gt;Showing result {{table.entries.displayingAmount}} of {{table.entries.totalAmount}}&lt;/div&gt;
                      &lt;/th&gt;
  
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>This is bootstrap. The only css styling for this is the class <code>user-table</code> has a <code>height: 720</code></p>
  
  <p>A pic of what the codes does, and what I want it to look like:
  <a href="https://awwapp.com/s/c7447569-50a4-49a7-805b-43eb0770985f/" rel="nofollow">https://awwapp.com/s/c7447569-50a4-49a7-805b-43eb0770985f/</a></p>