Created
September 9, 2015 16:19
-
-
Save mattrothenberg/d61dc6d2c11eb46d32ca to your computer and use it in GitHub Desktop.
Boostrap Fixed Table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment