Angular4_层级表格，表头固定

看图效果

 

描述不好，直接上代码：

html代码：

    {{ successMessage }}
    {{ errorMessage }}


    

        

    


    
                

        

            

                

                    
                
                

                    Handling Unit ID
                
                

                    Stage Location
                
                

                    Truck
                
                

                    Delivery Date
                
                

                    Order Type
                
                

                    Load Position
                
                

                    Weight
                
                

                    Operator
                
            
        
        

            

                    

                        
                    
                    
{{pallet.handlingUnitId}}
                    
{{pallet.stageLocation}}
                    
{{pallet.carrier}}
                    
{{pallet.deliveryDate| date:'MM/dd/yyyy'}}
                    
{{pallet.orderCode}}
                    
{{pallet.loadPosition}}
                    
{{pallet.weight| number:'1.3'}}
                    
{{pallet.operator}}
                
                

                    

                    

                        
                                    

                            

                                

                                    

                                    
Delivery
                                    
Customer
                                    
Ship To
                                    
SO Number
                                    
Delivery Date/Time
                                    
Truck
                                
                            
                            

                                

                                        

                                            
                                        
                                        
{{d.delivery|removeLeadingZeros}}
                                        
{{d.customer}}
                                        
{{d.shipTo|removeLeadingZeros}}
                                        
{{d.soNumber|removeLeadingZeros}}
                                        
{{d.dispatchTime| date:'MM/dd/yyyy hh:mm a'}}
                                        
{{d.carrier}}
                                    
                                    

                                        

                                        

                                            
                                                        

                                                

                                                    

                                                        
Line
                                                        
Material
                                                        
Description
                                                        
Qty
                                                        
UoM
                                                        

                                                    
                                                
                                                

                                                    

                                                            
{{line.line}}
                                                            
{{line.material}}
                                                            
{{line.description}}
                                                            
{{line.qty | number:'1.3'}}
                                                            
{{line.uoM}}
                                                            

                                                        
                                                    
                                                
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        
        

            

                

                    
                        
                    
                    
                        0 records found
                    
                    

                        
                            
                                {{rtPager.pager.loadedCount}} record{{rtPager.pager.loadedCount > 1 ? 's' : ''}}
                                    found
                                Show more
                            
                        
                    
                
            
        
    


    
    

    

    
There are no Handling Units in this queue.

css:

.btn-group {
  a {
    width: 180px;
  }
}

.wiz-container {
  background: #4b4f45;
  padding: 18px 0;
  .badge {
    background-color: orange;
    color: #fff;
    display: inline-block;
    text-align: center;
    margin-left: 10px;
  }
  .action-container {
    position: absolute;
    right: 20px;
  }
  .btn-secondary {
    box-shadow: none;
    &:first-child {
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
    }
    &:last-child {
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
    }
  }
  .btn {
    position: relative;
    background: transparent;
    color: #fff;
    border-color: #fff;
    cursor: pointer;
    overflow: hidden;
    span {
      display: block;
      position: absolute;
      top: -1.5px;
      left: -0.2px;
      border: solid transparent;
      border-left-color: #fff;
      border-width: 20px;
      z-index: 49;
      i {
        display: block;
        position: absolute;
        top: -18px;
        left: -20px;
        border: solid transparent;
        border-left-color: #4b4f45;
        border-width: 18px;
        z-index:50;
      }
    }
    &.active {
      background: #fff;
      color: #4b4f45;
      &+.btn span {
        border-left-color: #fff;
        i {
          border-left-color: #fff;
        }
      }
    }
  }
}
/*variables*/
$color-blue: #039be5;
$color-hover-blue: #06abfc;
$color-light-blue: #4fc3f7;
$color-btn-primary-focus: #67cbf8;
$color-btn-primary-active: #80d4f9;
$color-selected: #ccedfd;
$color-black: #212121;
$color-gray: #eeeeee;
$color-dark-grey: #5C707A;
$color-light-grey: #fafafa;
$color-muted-grey: #efefef;
$color-muted: #555;
$color-striped: #fcfcfc;
$color-white: #fff;
$font-medium: 14px;
$font-small: 12px;
$indent-unit: 8px;

/*variables*/
.filter-container {
  background: #4b4f45;
  .form-group>label {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: normal;
  }

  select {
    border-color: #fff;
    color: #fff;
    background: url('/assets/select.png') no-repeat right center;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: normal;
    option {
      background: #fff;
      color: #000;
    }
  }

  select::-ms-expand {
    display: none;
  }
}
.table-responsive {
  margin-bottom: 80px;
}

/*mixins*/
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}
@mixin opacity($opacity) {
  -ms-opacity: $opacity;
  opacity: $opacity;
}
@mixin transition($transition) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}
@mixin img-button {
  width: 44px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: 999px;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  @include box-shadow(none);
}
@mixin icon-reset() {
  background-image: url('data:image/png;base64,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');
}
@mixin icon-load() {
  background-image: url('data:image/png;base64,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');
}
@mixin icon-cancel() {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAC90lEQVRYR82YrZITQRSFRyB4AB4AgUQgEDhWIBCbGXBIHgGBwK9EIFZErIxARKyIiECkMjMUAoFAIhCIFRFbxW6mpypi997uvkXYnO7p+U1O1Ve1ldM/t3q7e27fqK1GC/UoWRbvk6wcx5k6T1L1Lc6K3wz9/T3J1CzOyrN4WXxI8usnttuwev316nGSq5M4VT8ooJt6FL/iXH0cZetndrj+pFczU593g2hKOe9l1Y8Xfx/wv5xWZ4Mnbs0kWaiHdrp24hWgvfkHTNIpNMcl8cJO20xxWryhw3OFJugH+g8u1+/s9PXEHfGg/UOH8pMNI0y8smigIeFr0Ibjl9mzQ24DF8VmlF6/tGFh8W0wxAELhReOr1Ib3q7M1YU775GZDe9/mY9Cb/dsW45smP9EP3b4BesWSgEyG6aRzg1AQxddCY3tgg7gsQ2XbwZ1ghq56EpobA8TGy7fu/WyLhHyQhAhz8Pq+eLmnmRgqIETEfJCECHPh841TPKNG7gQIS8EEfK85OVpo7tXhLwQRMjzU84jWuZzbLoRIS8EEfJ88FmL+A2GTB8i5IUgQl4FF7TC9FjEphMR8kIQIa8K3hK1kx0R8kIQIa8K3hL8FIemCxHyQhAhr4IV5xCzOz9WIkJeCCLk+aBD95O2RHmGTB8i5IUgQp6XtPgS6YoMMj2IkBeCCHl+yrF+EmHTjQh5IYiQ5yVdv9LJD5ePYAMHIuSFIEKeC34uUfJzXwfMtS7UyEVXQmN7mOpgWVyYAw2cdCU0tgsuPdhwjfgEooaHAF9nOhfeVpPDNxhy2O6KzIN7iO48QLfFJU/KLS5Rx/1QbOJ8/dSGh8XPkIOpTyzVWxuWX/usXAr1K5jUAQ00ENOdWyFEJs8YdnvwQjUKVsQlz2HKr1x9D9yzVTK1i3KOJ2oPX12Vt0ET0eBHTR6tLvgL5vwodCkuzNGEE2K1HUAIdntNOTdotVebiCfU93ZenvKWoRXjGt3FVoArs4qcp5RjXk3qY1LERoqiW61o4riacEeRAAAAAElFTkSuQmCC');
}

/* mixins */
body,
html {
  background: $color-light-grey;
  font-size: $font-medium;
  * {
    outline: none !important;
  }
}
h1,
h2 {
  color: #049AE6;
}
h3,
h4,
h5,
h6 {
  color: $color-black;
  margin-bottom: 20px;
}
ul {
  list-style: none;
  &.bulleted {
    li {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAAAEklEQVQYV2PwPfodjojiHP0OAERhIJH3C1fAAAAAAElFTkSuQmCC') no-repeat left top;
      background-repeat: no-repeat;
      background-position-y: 8px;
      padding-left: 10px;
    }
  }

  &.agenda {
    padding-left: 30px;
    ul {
      padding-left: 30px;
    }
    li {
      padding-left: 0;
    }
    @media (max-width: 768px) {
      padding-left: 15px;
      li {
        padding-top: 2px;
      }
      ul {
        padding-left: 15px;
      }
    }
  }
}
a {
  color: #147391;
}
code {
  padding: 2px;
}
section {
  margin-top: -60px;
  padding-top: 60px;
  &:target>h3,
  &:target>h4 {
    text-decoration: underline;
  }
}
aside {
  p {
    vertical-align: middle;
  }

  padding: 15px;
  margin: 20px 0 20px 25px;
  border: 1px solid $color-muted-grey;
  border-left-width: 5px;
  border-left-color: $color-blue;
  background-position: 10px center;
  background-repeat: no-repeat;
  @media (max-width: 768px) {
    margin-left: 0;
  }
}
.spinner {
  display: table;
  width: 100%;
  height: 100vh;
  .spinner-pusher {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    .spinner-wraper {
      vertical-align: middle;
      width: 100px;
      height: 100px;
      position: relative;
      margin: 50px auto;
      cursor: pointer;
      border-radius: 110px;
      -webkit-border-radius: 110px;
    }
    .spinner-body {
      background-color: $color-light-grey;
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      z-index: 2;
      border-radius: 110px;
      text-align: center;
      font-size: 10px;
      color: $color-light-grey;
      line-height: 90px;
    }
    .spinner-line {
      margin: 0 auto;
      background: $color-light-blue;
      background: -webkit-radial-gradient(20% 20%, circle cover, $color-light-blue 0%, transparent 60%, transparent 100%);
      background: radial-gradient(circle at 20% 20%, $color-light-blue 0%, transparent 60%, transparent 100%);
      border-radius: 110px;
      padding: 10px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-animation-name: spinner-rotate;
      -webkit-animation-duration: 1s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -moz-animation-name: spinner-rotate;
      -moz-animation-duration: 1s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      animation-name: spinner-rotate;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
  }
}
@-webkit-keyframes spinner-rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner-rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner-rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.btn-primary {
  // background-color: $color-light-blue;
  // border-color: $color-light-blue;
  @include border-radius(0);
  &:focus,
  &:hover {
    background-color: $color-btn-primary-focus;
    border-color: $color-btn-primary-focus;
  }

  &:active {
    &:focus {
      background-color: $color-btn-primary-active;
      border-color: $color-btn-primary-active;
      @include box-shadow(none);
    }
    background-color: $color-btn-primary-active;
    border-color: $color-btn-primary-active;
    @include box-shadow(none);
  }

  &.docs-link {
    padding: 10px 25px;
    &+.docs-link {
      margin-left: 15px;
    }
    @media (max-width:500px) {
      width: 100%;
      &+.docs-link {
        margin-top: 5px;
      }
    }
  }
}
.btn {
  &.btn-reset {
    margin-top: 21px;
    margin-bottom: -5px;
    @include img-button();
    @include icon-reset();
  }

  &.btn-load {
    margin-top: 21px;
    margin-bottom: -5px;
    @include img-button();
    @include icon-load();
  }

  &.btn-cancel {
    margin-top: 21px;
    margin-bottom: -5px;
    @include img-button();
    @include icon-cancel();
  }
}
div.toolbar {
  text-align: right;
  padding-bottom: 15px;
  ul {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
    text-align: right;
    margin-right: -5px;
    margin-bottom: 0;
    li {
      display: inline-block;
      padding-right: 5px;
      padding-left: 5px;
    }
  }

  @media (max-width: 768px) {
    ul {
      &:after {
        content: '';
        clear: both;
        display: table;
      }
      &:before {
        content: '';
        clear: both;
      }
      li {
        width: 50%;
        float: left;
        padding-top: 5px;
        .btn {
          width: 100%;
        }
      }
    }
  }
}
rt-status-done,
rt-status-failed,
rt-status-initial,
rt-status-no-data,
rt-status-progress,
rt-status-request-cancelled {
  display: block;
  text-align: center;
}
rt-demo-buffered-footer,
rt-demo-paged-footer {
  display: block;
}
form {
  label {
    color: $color-muted;
    font-weight: normal;
    line-height: 1.5;
  }

  margin-bottom: 15px;
  .btn {
    margin-top: 21px;
    margin-bottom: -5px;
    &+.btn {
      margin-left: 5px;
    }
  }
}
.rt-sortable {
  position: relative;
  padding-right: 45px;
  cursor: pointer;
  &:after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -11px;
    background-position: center center;
    background-repeat: no-repeat;
  }

  &:hover {
    &:after {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAALRJREFUOBHtVFEKwjAMrdZzCRs7SqG3kOEtCj3KWMF7VUwglTjRPHAfMlYIzR7vvb6FUuf29TcTyDmfudBAJ5RYax2F2yOaI0KSpB1xOzQ1ZKzSOt1/C2Uaq7TNB0ptGlPCCznedQnWDtrIfrD+I6U0EYdvhF4lxjhoYNmbM/beX0nEvGcJtvR6+TaNQwg3UhSlKoIp6L01jVlCCccm1X3Dftpp1jMXagK/FasnRRPuvI8TeADGiDU2vzXKpQAAAABJRU5ErkJggg==');
    }
  }

  &.rt-sort-asc:after {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAFxJREFUOBFjYBgFoyEwgkJgzpw5diBMrJdZiFX49+/fBqhaJ2L0MBGjCOpSR6BaR2JdTZTBSK5lQGbjcxRBg5FcCzOHKFcTNBjowjqgif+QMVQMZtEoPRoCwzYEAEPeIwb043OFAAAAAElFTkSuQmCC');
  }

  &.rt-sort-desc:after {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAHZJREFUOBFjYBgFoyEw9EOAkZAXZs6cuQeoxhFN3f709HQXNDEULhMKDwuHmZm5CSgMUgfHUDEsqhFCBA1OSUk5BFS+H6GFYT9UDEkIk0nQYJAWoAsbYFqR2TAximhgWO8DYWINYSFWIdVdSqzFo+pGQ2AAQwAAIMMSMUdoIWEAAAAASUVORK5CYII=');
  }
}
.table-responsive {
  border: 0;
}
.table {
  font-size: $font-small;
  thead {
    tr {
      th {
        background-color: $color-white;
        font-weight: bold;
        color: #053B75;
        font-size: $font-small;
        border-bottom-color: $color-gray;
      }
    }
  }

  tbody {
    tr {
      background-color: $color-white;
      td {
        border-top-color: $color-gray;
      }
      &:nth-of-type(even) {
        background-color: $color-striped;
      }
      &:hover {
        background-color: $color-light-grey;
      }
      &.rt-selected {
        background-color: $color-selected;
      }
    }
  }

  tfoot {
    tr {
      background-color: $color-gray;
      td {
        border-top: 0;
        padding-right: 40px;
        vertical-align: middle;
        .form-control {
          display: inline-block;
          width: 50px;
          text-align: center;
          padding: 6px;
          vertical-align: middle;
        }
      }
    }
  }
}
section.alertify-logs {
  bottom: 75px;
}
section.alertify-alert {
  padding-top: 0;
  margin-top: 0;
  @include box-shadow(none);
  @include border-radius(0);
}
.alertify-button-ok {
  @include box-shadow(none);
  @include border-radius(0);
  background: $color-light-blue;
  border-color: $color-light-blue;
  color: $color-white;
  text-decoration: none;
  text-shadow: none;
  &:focus,
  &:hover {
    @include box-shadow(none);
    @include border-radius(0);
    background: $color-btn-primary-focus;
    border-color: $color-btn-primary-focus;
    color: $color-white;
    text-decoration: none;
  }

  &:active {
    &:focus {
      background: $color-btn-primary-active;
      border-color: $color-btn-primary-active;
      color: $color-white;
      text-decoration: none;
      @include box-shadow(none);
    }
    background: $color-btn-primary-active;
    border-color: $color-btn-primary-active;
    color: $color-white;
    text-decoration: none;
    @include box-shadow(none);
  }
}
.control-group {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 200px;
  height: 210px;
  margin: 10px;
}
.control {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 18px;
  cursor: pointer;
  font-size: 18px;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
}
.control--radio .control__indicator {
  border-radius: 50%;
}
.control:hover input~.control__indicator,
.control input:focus~.control__indicator {
  background: #ccc;
}
.control input:checked~.control__indicator {
  background: #2aa1c0;
}
.control:hover input:not([disabled]):checked~.control__indicator,
.control input:checked:focus~.control__indicator {
  background: #0e647d;
}
.control input:disabled~.control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked~.control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.control--checkbox input:disabled~.control__indicator:after {
  border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}
.control--radio input:disabled~.control__indicator:after {
  background: #7b7b7b;
}
.select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%;
}
.select select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border: 0;
  border-radius: 0;
  background: #e6e6e6;
  color: #7b7b7b;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.select select::-ms-expand {
  display: none;
}
.select select:hover,
.select select:focus {
  color: #000;
  background: #ccc;
}
.select select:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.select__arrow {
  position: absolute;
  top: 16px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover~.select__arrow,
.select select:focus~.select__arrow {
  border-top-color: #000;
}
.select select:disabled~.select__arrow {
  border-top-color: #ccc;
}
.hideGrid {
  display: none;
}
.rightjustified{
  text-align: right;
}
// 这个是主要的。
.stickyTable{
    overflow: visible !important;
    thead {
        tr{
            th{
                position: sticky !important;
                top: 134px !important;
            }
        }
    }
}

其实就是一个

position:sticky;