style.css

html, body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}
/* we use rrow so we don't conflict with bootstrap's row class */
.box .rrow.header {
  flex: 0 1 auto;
}

.box .rrow.content {
  flex: 1 1 auto;
}

.box .rrow.footer {
  flex: 0 1 40px;
}

table.content {
  margin-bottom: 0;
}

table {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
}

table * {
  box-sizing: inherit;
  -moz-box-sizing: inherit;
}

thead {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

tbody {
  overflow-y: auto;
  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;
}

.st-sort-ascent:before {
  content: '\25B2';
}

.st-sort-descent:before {
  content: '\25BC';
}