我在一个页面中有多个表格。我想修复每个表的标题为其专用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"> </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"> </td>
<td><strong>Total</strong></td>
<td>
<strong>{{productValue.total | currency}}</strong>
</td>
<td> </td>
</tr>
</tfoot>
</table>
</div>
答案 0 :(得分：0)
在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;
}