div 내의 고정 테이블 부트 스트랩 헤더

Question

페이지에 여러 테이블이 있습니다. 전용 div에 대한 각 테이블의 헤더를 수정하고 싶습니다. 나는 많은 것을 시도했지만 아무것도 효과가 없었습니다. 고정 헤더가 div에서 나가기 때문에 div에 대해서만 제한하려고합니다.

또한, 나는이 개 TBODY 태그와 주어진 샘플 1 개 TFOOT 태그를 봤는데, 그에 따라 솔루션을 찾고 있어요. 여기

샘플 코드 TR 태그

<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> 

Answer 1

추가 명확 클래스이며, 아래의 CSS는 나를 위해 작동합니다.

.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; 
}