Tabelle erstellen 100% mit festen header mit dem smart table-eckig
http://plnkr.co/edit/GIeXoF?p=preview
Wie kann ich diese Tabelle mit einer Höhe von 100% Höhe, aber der header muss noch fixiert bleiben?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="[email protected]" 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;
}
- Ich bin es auch. Wie erklären Sie die Lösung, wenn Sie herausfinden?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die Lösung, die ich fand, war so erstellen Sie eine weitere Tabelle enthält nur die Kopfzeile, so, wenn ich ein Klick auf die gefälschte header werfen JS als feuert clic-event auf dem smart table-header. Auf diese Weise können Sie de st-Art-Richtlinie.
Es ist eine schmutzige Lösung, aber Sie funktioniert. Mein Beispiel hat die Breite auf 100% und nicht 100% Höhe, aber ich hoffe, dies hilft Ihnen mit der Kopfzeile.
CSS: