http://plnkr.co/edit/GIeXoF?p=preview
我怎样才能使这个表格的高度为 100% 高度，但标题必须保持固定？
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src=smart-table.debug.js></script>
</head>
<body ng-controller="mainCtrl">
<table class="table table-striped">
<thead>
<tr>
<th st-ratio="20" st-sort="firstName">first name</th>
<th st-ratio="20" st-sort="lastName">last name</th>
<th st-ratio="10" st-sort="age">age</th>
<th st-ratio="30" st-sort="email">email</th>
<th st-ratio="20" st-sort="balance">balance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayed">
<td st-ratio="20">{{row.firstName}}</td>
<td st-ratio="20">{{row.lastName | uppercase}}</td>
<td st-ratio="10">{{row.age}}</td>
<td st-ratio="30">{{row.email}}</td>
<td st-ratio="20">{{row.balance | currency}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-items-by-page="20" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
table {
box-sizing: border-box;
-moz-box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
height: 500px; /* this can vary */
}
table * {
box-sizing: inherit;
-moz-box-sizing: inherit;
}
thead {
display: flex;
flex-direction: column;
align-items: stretch;
}
tbody {
overflow-y: scroll;
display: inline-block;
}
thead > tr, tbody > tr, tfoot > tr {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
thead, tfoot {
flex-shrink: 0;
}
th, tbody td {
width: 20%; /* this can vary */
overflow-x: hidden;
text-overflow: ellipsis;
display: inline-block;
}
tfoot {
display: inline-block;
}
tfoot td {
width: 100%;
display: inline-block;
}
最佳答案
我找到的解决方案是创建另一个仅包含表头的表，因此当我点击假表头时会抛出一个 JS，而不是在智能表表头上触发 clic 事件。通过这种方式，您可以使用 de st-sort 指令。 这是一个肮脏的解决方案，但有效。我的示例的宽度为 100%，高度不是 100%，但我希望这对标题有所帮助。
<table id="tableHeader" class="table-condensed">
<thead>
<tr role="rowheader">
<!--<i class="fa fa-sort"></i>-->
<th class="sorting" st-ratio="10" onclick="fire_clic(1)">IdCustomer<i class="icon-sort icon-small"></i></th>
<th class="sorting" st-ratio="35" onclick="fire_clic(2)">Name<i class="icon-sort icon-small"></i></th>
<th st-ratio="15">Nif</th>
<th class="sorting" st-ratio="15" onclick="fire_clic(4)">Phone<i class="icon-sort icon-small"></i></th>
<th class="sorting" st-ratio="25" onclick="fire_clic(5)">Email <i class="icon-sort icon-small"></i></th>
</tr>
</thead>
</table>
<div class="table-container">
<table st-persist="tableLS" st-table="customers" st-safe-src="rowCustomerCollection" st-pagination-scroll st-pipe="callServer"
class="table table-striped table-hover table-condensed">
<thead data-ng-hide="true">
<tr>
<th id="col1" st-ratio="10" st-sort="IdCustomer">ID</th>
<th id="col2" st-ratio="35" st-sort="nom">Name</th>
<th st-ratio="15">Nif</th>
<th id="col4" st-ratio="15" st-sort="tel">Phone</th>
<th id="col5" st-ratio="25" st-sort="dPer3">Email</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in customer">
<td st-ratio="10" title="Go to customer" class="irA" data-ng-click="open(c.idCustomer)">
{{c.idCustomer}}
</td>
<td st-ratio="35">{{c.nom}}</td>
<td st-ratio="15">{{c.nif}}</td>
<td st-ratio="15">{{c.phone}}</td>
<td st-ratio="25">{{c.dPer3}}</td>
</tr>
</tbody>
</table>
</div>
<script>
function fire_clic(id, elem) {
var idControl = 'th[id=col' + id + ']';
//Fire the clic event in smart-table
$(idControl).trigger('click');
}
</script>
CSS:
#tableHeader {
width: 100%;
}
.table-container {
height: 500px;
width: 100%;
overflow-y: scroll;
white-space: nowrap;
font-size: small;
align-items: stretch;
}
.table-condensed > tbody > tr > td {
padding: 2px;
}
关于angularjs - 使用带有智能表格 Angular 的固定标题使表格 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29479587/