Flex Table Fixed Header

by jontxo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <br>
  <div class="row">
    <div class="col-sm-12">    
      <div class="panel panel-default">
        <div class="panel-body">
          <table class="table table-striped flex-table">
            <thead>
              <tr>
                <th>Test</th>
                <th>Test</th>
                <th>Test</th>
                <th>Test</th>
                <th>Test</th>
                <th>Test</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
              </tr>
              <tr>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
              </tr>
              <tr>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
              </tr>
              <tr>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
              </tr>
              <tr>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
                <td>Something</td>
              </tr>
              <tr>
                <td>Something</td>
            ...

CSS

.panel-body {
  height: 300px;
}

table {
  border-top: 1px solid black;    /* Just to Highlight Top of Table */
}
table thead tr {
  height: 5em;    /* Fixed Row Height */
}

/* Flex Table */
table.flex-table {
  display: flex;
  flex-direction: column;
  height: 100%;
}
table.flex-table thead,
table.flex-table tbody {
  display: block;
}
table.flex-table thead {
  margin-right: 0px;
}
table.flex-table tbody {
  flex: 1;
  overflow-y: scroll;
}
table.flex-table tr {
  width: 100%;
  display: flex;
}
table.flex-table tr td,
table.flex-table tr th {
  display: block;
  flex: 1;
}