Boostrap Fixed Table

table.html

<table class="table queue-table">
      <thead>
        <tr>
          <th class="score-cell col-sm-2">Score</th>
          <th class="participants-cell col-sm-2">Participants</th>
          <th class="channel-cell col-sm-1">Channel</th>
          <th class="excerpt-cell col-sm-6">Excerpt</th>
          <th class="attachment-cell col-sm-1">Attachment</th>
        </tr>
      </thead>
      <tbody id="tableBody" scrollbar>
        <tr ng-repeat="message in rsMessageData.slice(((currentPage-1) * itemsPerPage), ((currentPage )* itemsPerPage)) | filter: searchCriteria track by $index" ui-sref="detail({messageType: 'email'})">
          <td class="score-cell col-sm-2 text-center">
            <gauge position="queue" data-percentage="{{message.score}}"></gauge>
            <p class="text-center">{{ message.topic.name }} </p>
          </td>
          <td class="participants-cell col-sm-2">
            <ul class="list-unstyled">
              <li ng-repeat="participant in message.participants | orderBy:'name' track by $index">
                {{ participant.name }}
                <div class="message-flag" ng-show="(message.topic.name == 'Anti-Corruption' && $index == 0)"
                  tooltip="This message has been flagged because it has external participants"
                  tooltip-placement="right"
                  tooltip-trigger="mouseenter"
                  >
                  <i class="fa fa-info"></i>
                </div>
              </li>
              <li class="others-count">
                + {{ message.othersCount }} others
              </li>
            </ul>
          </td>
          <td class="channel-cell col-sm-1">
            <p>{{ message.channel.name }}</p>
          </td>
          <td class="excerpt-cell col-sm-6">
            <p ng-bind-html="message.excerpt | highlight:message.excerpt.split(' ')[3]"></p>
          </td>
          <td class="attachment-cell col-sm-1 text-center">
            <i class="fa fa-paperclip fa-lg"></i>
          </td>
        </tr>
      </tbody>
    </table>

table.scss

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

$light-grey: #F7F7F7;
$border-grey: darken($light-grey, 5%);

.table-fixed {
    thead {
      width: 100%;
    }

    tbody {
      @include calc( max-height, '100vh - 295px');
      overflow-y: auto;
      width: 100%;
    }

    tr {
      @extend .clearfix;
    }

    thead, tbody, tr, td, th {
      display: block;
    }

    tbody td, thead > tr > th {
      float: left;
      padding: 12px;
      border-bottom-width: 0;
    }
  }

  .queue-table {
    background: white;
    @extend .table-fixed;

    .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
      background: rgba(0,0,0, .35);
      border: 0;
    }

    thead tr {
      box-shadow: rgba(0, 0, 0, 0.20) 0px 5px 5px -4px;

      th {
        border-right: 1px solid $border-grey;
      }
    }
  }