在div中冻结表引导程序头

Question

我在一个页面中有多个表格。我想修复每个表的标题为其专用div。我尝试了很多东西，但没有成功。固定标题也离开了div，我想限制它只用于Div。

此外，我在给定的样本中有2个 tbody 标签和1个 tfoot 标签，我正在寻找相应的解决方案。

以下是示例代码

<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

在TR标签中添加了明确的类，下面的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;
}