eine Tabelle füllen leere Zeilen mit einem Rahmen css

Question

So habe ich einen bestimmten Bereich für eine Tabelle, und manchmal wird die Tabelle nicht bis zum Ende des Bereichs vollständig gefüllt nach dem Lesen aus der Datenbank. Für die leeren Räume möchte ich einen Rahmen um den Tisch herum haben, also sieht es so aus, als wäre der Tisch ganz unten, aber der verbleibende Raum ist nur ein großer, leerer Raum, der von einem Rahmen umgeben ist (sieht aus wie sein Teil) der Tabelle)

Irgendwelche Tipps, wie man das macht? lieber CSS verwenden nur

Code:

<div class="col-md-11" style="width:86%"> 
     <div class="table-responsive user-table" style="overflow-y:auto; overflow-x:hidden"> 
      <table class="table table-striped table-bordered" id="table_{{table.name}}"> 
       <thead> 
        <tr> 
         <th ng-repeat="header in table.headers track by $index" style="background-color: #0D3C47; color:white"> 
          <div data-ng-if="header.type !== 'checkbox'">{{header}}</div> 
          <div data-ng-if="header.type === 'checkbox'">{{header.value}}</div> 
         </th> 

        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="row in table.rows track by $index"> 
         @*<tr ng-repeat="row in table.rows | activeOrNot: table.checkboxCol: table.filterIsEnabled track by $index">*@ 

         <td ng-repeat="item in row | filter: {type: '!GUID'} track by $index " 
          ng-click="table.selectedRow(row)" 
          ng-class="{ 'highlight' : row === table.selected}"> 

          <div data-ng-if="item.type === undefined">{{item}}</div> 
          <div data-ng-if="item.type === 'checkbox'"> 
           <input type="checkbox" ng-checked="item.checked" ng-disabled="true"> 
          </div> 
          <div data-ng-if="item.type === 'GUID'"> 
          </div> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 

     <table class="table table-striped table-bordered"> 
      <thead> 
       <tr> 
        <th class="text-right" style="padding-right: 30px; font-size: 15px"> 
         <div>Showing result {{table.entries.displayingAmount}} of {{table.entries.totalAmount}}</div> 
        </th> 

       </tr> 
      </thead> 
     </table> 

    </div> 

Dies ist Bootstrap. Das einzige CSS-Styling hierfür ist die Klasse user-table ein height: 720

ein Bild von dem, was die Codes nicht, und was ich es aussehen soll: https://awwapp.com/s/c7447569-50a4-49a7-805b-43eb0770985f/

Answer 1

Sie sollten eine andere Klasse und Div als hinzufügen neue Container

Hier ist Ihre komplette Code: http://codepen.io/mhadaily/pen/PzAPEW

Zur Klarstellung:

Sie Klasse müssen Grenze nach rechts und links

.user-table{ 
    height: 720px; 
    border-right:1px solid #ddd; 
    border-left:1px solid #ddd; 
    padding: 0px; 
    border-top:0px; 
    border-bottom:0px; 
} 

und auch müssen Sie eine neue Klasse zur ersten Tabelle hinzuzufügen zusätzliche Grenzen zum Beispiel entfernen, nannte ich meine Klasse nicht-bottom

<table class="table table-striped table-bordered no-bottom" id="table_{{table.name}}"> 

versuche Grenze in CSS zu entfernen fühlen Sie sich frei, so viel zu ändern, wie Sie

.table-bordered.no-bottom{ 
    margin-bottom:0px; 
    border-right:0px; 
    border-left:0px; 
} 

wollen und dann jetzt Sie können auch eine Grenze in Klassen ändern müssen:

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{ } 

Denken Sie daran, dass Sie Ihre benutzerdefinierte Klasse zu den oben genannten hinzufügen sollten, um globale Änderungen zu vermeiden.

das ist es. Du hast was du willst. Sie können das Ergebnis hier sehen http://codepen.io/mhadaily/pen/PzAPEW