2017-12-15 4 views
0

Ich habe mehrere Tabellen auf einer Seite. Ich möchte den Header jeder Tabelle für sein eigenes div. Ich habe viele Dinge ausprobiert, aber nichts hat geklappt. Der feste Header wird ebenfalls aus dem Div entfernt und ich möchte ihn nur für Div einschränken.Freeze-Tabelle Bootstrap-Header innerhalb div

Außerdem, ich habe 2 tbody Tags und 1 tfoot Tag in gegebener Probe und ich bin dementsprechend für Lösung. Hier

ist der Beispielcode

<div class="col-sm-12 col-lg-12"> 
     <h2 class="card-title">PRODUCT VALUE</h2> 


       <table class="table table-bordered table-hover table-responsive table-striped"> 

        <thead> 
         <tr> 
          <th style="width:115px">CONDITION</th> 
          <th>PRODUCT NAME</th> 
          <th>COMMODITY CODE</th> 
          <th>WEIGHT</th> 
          <th>COST</th> 
          <th>QUANTITY</th> 
          <th>CLAIM AMOUNT</th> 
          <th>TYPE</th> 
          <th style="width:100px">&nbsp;</th> 
         </tr> 
        </thead> 


        <tbody> 

         <!-- BIND PRODUCT VALUES --> 
         <tr ng-repeat="item in productValue.Values" ng-if="!item.IsDelete"> 

          <!--NEW/USES--> 
          <td ng-dblclick="item.IsEditable = true"> 

           <span ng-show="!item.IsEditable">{{item.Condition}}</span> 
           <select class="form-control input-sm" ng-if="item.IsEditable" ng-model="item.ConditionId" ng-options="option.ConditionId as option.Condition for option in productCondition.options"></select> 

          </td> 

          <!--PRODUCT VALUE--> 
          <td ng-dblclick="item.IsEditable = true"> 

           <span ng-show="!item.IsEditable">{{item.ProductName}}</span> 

           <div ng-show="item.IsEditable"> 
            <input kendo-auto-complete k-ng-model="inLineAutoComplete.kendoUser[$index]" ng-model="item.query" k-data-source="inLineAutoComplete.dataSource" k-options="inLineAutoComplete.options" ng-change="getInLineQuery(item.query, $index)" style="width: 100%" ng-init="item.query = item.ProductName" /> 
           </div> 
          </td> 

          <!--COMMODITY CODE--> 
          <td ng-dblclick="item.IsEditable = true"> 

           <span ng-show="!item.IsEditable">{{item.CommodityCode}}</span> 

           <input type="text" ng-model="item.CommodityCode" class="form-control input-sm" ng-if="item.IsEditable" /> 
          </td> 

          <!--WEIGHT--> 
          <td ng-dblclick="item.IsEditable = true"> 

           <span ng-show="!item.IsEditable">{{item.Weight}}</span> 

           <input type="number" ng-model="item.Weight" min="0" class="form-control input-sm" ng-if="item.IsEditable" /> 
          </td> 

          <!--COST--> 
          <td ng-dblclick="item.IsEditable = true"> 

           <span ng-show="!item.IsEditable">{{item.Cost | currency}}</span> 

           <input type="number" ng-model="item.Cost" min="0" class="form-control input-sm" ng-if="item.IsEditable" ng-change="item.ClaimAmount = (item.Cost * item.Quantity)" /> 
          </td> 

          <!--QUANTITY--> 
          <td ng-dblclick="item.IsEditable = true"> 

           <span ng-show="!item.IsEditable">{{item.Quantity}}</span> 

           <input type="number" ng-model="item.Quantity" min="0" class="form-control input-sm" ng-if="item.IsEditable" ng-change="item.ClaimAmount = (item.Cost * item.Quantity)" /> 
          </td> 

          <!--CLAIM AMOUNT--> 
          <td ng-dblclick="item.IsEditable = true"> 

           <span ng-show="!item.IsEditable">{{item.ClaimAmount | currency}}</span> 

           <input type="number" ng-model="item.ClaimAmount" min="0" class="form-control input-sm" ng-if="item.IsEditable" readonly /> 
          </td> 

          <!--PRODUCT VALUE TYPE--> 
          <td ng-dblclick="item.IsEditable = true"> 

           <span ng-show="!item.IsEditable">{{item.Type}}</span> 

           <select ng-if="item.IsEditable" class="form-control input-sm" ng-model="item.TypeId" ng-options="x.TypeId as x.Type for x in productTypes.options"></select> 

          </td> 

          <!--UPDATE, INSERT & DELETE--> 
          <td> 

           <!--REMOVE PRODUCT VALUES--> 
           <button type="button" class="btn btn-primary brand-btn btn-sm" ng-show="!item.IsEditable" ng-click="productValue.remove($index, item, true)" kendo-tooltip k-content="'Delete'"> 

            <i class="glyphicon glyphicon-remove"></i> 
           </button> 

           <!--UPDATE PRODUCT VALUES--> 
           <button type="button" class="btn btn-primary brand-btn btn-sm" ng-show="item.IsEditable" ng-click="productValue.update($index, item, fasle)" kendo-tooltip k-content="'Update'"> 

            <i class="glyphicon glyphicon-ok-circle"></i> 
           </button> 

           <!--ROLLBACK/Cancel PRODUCT VALUES--> 
           <button type="button" class="btn btn-primary brand-btn btn-sm" ng-show="item.IsEditable" ng-click="productValue.rollBack($index,item.ProductValueId)" kendo-tooltip k-content="'Cancel'"> 

            <i class="glyphicon glyphicon-remove-circle"></i> 
           </button> 
          </td> 
         </tr> 

        </tbody> 


        <tbody> 
         <!-- ADD NEW PRODUCT VALUES--> 
         <tr> 

          <!--NEW/USES DROP-DOWN--> 
          <td> 
           <select class="form-control input-sm" ng-model="productValue.model.ConditionId" ng-options="item.ConditionId as item.Condition for item in productCondition.options" required> 
            <option value="">Select</option> 
           </select> 
          </td> 

          <!--AUTO-COMPLETE PRODUCT VALUE--> 
          <td> 
           <input kendo-auto-complete k-ng-model="searchProduct.kendoUser" ng-model="searchProduct.query" k-data-source="searchProduct.dataSource" k-options="searchProduct.options" style="width: 100%" required /> 
          </td> 

          <!--COMMODITY CODE--> 
          <td> 
           <input type="text" class="form-control input-sm" ng-model="productValue.model.CommodityCode" /> 
          </td> 

          <!--WEIGHT--> 
          <td> 
           <input type="text" class="form-control input-sm" ng-model="productValue.model.Weight" required /> 
          </td> 

          <!--COST--> 
          <td> 
           <input type="text" class="form-control input-sm" ng-model="productValue.model.Cost" ng-change="calculateClaimAmount(productValue.model.Quantity)" required /> 
          </td> 

          <!--QUANTITY--> 
          <td> 
           <input type="number" min="0" class="form-control input-sm" ng-model="productValue.model.Quantity" ng-change="calculateClaimAmount(productValue.model.Quantity)" required /> 
          </td> 

          <!--CLAIM AMOUNT--> 
          <td> 
           <input type="number" min="0" class="form-control input-sm" ng-model="productValue.model.ClaimAmount" required readonly /> 
          </td> 

          <!--PRODUCT TYPE DROP-DOWN--> 
          <td> 
           <select class="form-control input-sm" ng-model="productValue.model.TypeId" ng-options="item.TypeId as item.Type for item in productTypes.options" required> 

            <option value="">Select</option> 
           </select> 
          </td> 

          <!--SUMBIT NEW PRODUCT VALUES--> 
          <td> 
           <button type="submit" class="btn btn-primary brand-btn btn-sm" kendo-tooltip k-content="'Add Product'"> 
            <i class="glyphicon glyphicon-plus"></i> 
           </button> 

          </td> 
         </tr> 

        </tbody> 

        <tfoot> 
         <tr> 
          <td colspan="6">&nbsp;</td> 
          <td><strong>Total</strong></td> 
          <td> 
           <strong>{{productValue.total | currency}}</strong> 

          </td> 
          <td>&nbsp;</td> 
         </tr> 
        </tfoot> 
       </table> 
</div> 
+0

Wenn möglich Sie [Datentabelle mit Bootstrap] verwenden (https://datatables.net/extensions/fixedheader/) – Tanmay

+0

Siehe das Beispiel hier https://codepen.io/yavuzselim/pen/LNYrBd –

Antwort

0

hinzugefügt klare Klasse in TR-Tag und die folgenden CSS funktioniert für mich.

.table-fixed thead { 
    width: 100%; 
} 

.table-fixed tfoot { 
    overflow-y: auto; 
    width: 100%; 
} 

.table-fixed tbody { 
    max-height: 200px; 
    overflow-y: auto; 
    width: 100%; 
} 

.table-fixed thead, .table-fixed tbody, .table-fixed tfoot, .table-fixed tr, .table-fixed td, .table-fixed th { 
    display: block; 
} 

    .table-fixed tbody td, .table-fixed tfoot td, .table-fixed thead > tr > th { 
     float: left; 
    } 

.clear { 
    clear: both; 
}