Skip to content

Instantly share code, notes, and snippets.

@rochapablo

rochapablo/.html

Created Jul 26, 2018
Embed
What would you like to do?
Fixed Table with Bootstrap
<div class="container-fluid h-100 d-flex align-items-stretch bg-red">
<div class="row">
<div class="col-12 d-flex align-items-stretch bg-orange">
<div class="row">
<div class="col-3 bg-green">
<div class="row d-flex flex-column h-100">
<div class="col-12 bg-pink">filter</div>
<div class="col-12 bg-blue">
<table class="table">
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
<tr>
<td>001</td>
<td>pablo</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button class="btn btn-secondary">1</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="col-9 d-flex align-items-stretch bg-yellow">
<div class="col-12">details</div>
</div>
</div>
</div>
</div>
</div>
html, body {
height: 100vh;
overflow: hidden;
}
table {
height: 100%;
display: flex;
align-items: stretch;
flex-direction: column;
tbody {
// height: 80%;
display: block;
overflow: auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
background-color: AliceBlue;
}
tfoot {
background-color: Aquamarine;
}
}
.bg {
&-red { background-color: red; }
&-green { background-color: green; }
&-blue { background-color: blue; flex: 1; }
&-orange { background-color: orange; overflow: hidden; }
&-yellow { background-color: yellow; overflow: hidden; }
&-pink { background-color: pink; flex: none; height: auto; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.