Angular4_层级表格，表头固定

看图效果

描述不好，直接上代码：

html代码：

<div [ngStyle]="alertRight" class="bottom-alert topAlter"><ngb-alert *ngIf="successMessage" type="success" (close)="successMessage = null">{{ successMessage }}</ngb-alert><ngb-alert *ngIf="errorMessage" type="danger" (close)="errorMessage = null">{{ errorMessage }}</ngb-alert>
</div>
<div class="subNav"><div class="container-fluid"><nav [type]="'loadShipment'"></nav></div>
</div>
<div class="table-responsive stickyTable" style="padding-top: 134px;" *ngIf="!noRecord"><table class="table table-striped" [rtList]="getHus" #list="rtList"><thead><tr><th><span></span></th><th><span>Handling Unit ID</span></th><th><span>Stage Location</span></th><th><span>Truck</span></th><th><span>Delivery Date</span></th><th><span>Order Type</span></th><th><span>Load Position</span></th><th style="position: relative;" class="rightjustified" [style.top]="columnTop"><span>Weight</span></th><th><span>Operator</span></th></tr></thead><tbody><ng-template ngFor let-pallet [ngForOf]="list.items" let-i="index"><tr><td (click)="expandOrders(pallet)" style="cursor:pointer;"><i [ngClass]="{'fa': true, 'fa-caret-right': !pallet.expandOrder,'fa-caret-down': pallet.expandOrder, 'fa-lg': true}"></i></td><td>{{pallet.handlingUnitId}}</td><td>{{pallet.stageLocation}}</td><td>{{pallet.carrier}}</td><td>{{pallet.deliveryDate| date:'MM/dd/yyyy'}}</td><td>{{pallet.orderCode}}</td><td>{{pallet.loadPosition}}</td><td class="rightjustified">{{pallet.weight| number:'1.3'}}</td><td>{{pallet.operator}}</td></tr><tr [hidden]='!pallet.expandOrder'><td style="background-color: white"></td><td colspan="10" style="padding:0px"><table class="table table-striped" style="margin-bottom: 0px;"><thead><tr><th style='width:4%'></th><th style='width:16%'>Delivery</th><th style='width:16%'>Customer</th><th style='width:16%'>Ship To</th><th style='width:16%'>SO Number</th><th style='width:16%'>Delivery Date/Time</th><th style='width:16%'>Truck</th></tr></thead><tbody><ng-template ngFor let-d [ngForOf]="pallet.deliveries" let-i="index"><tr><td (click)="expandLineItems($event,pallet,d)" style="cursor:pointer;"><i [ngClass]="{'fa': true, 'fa-caret-right': !d.expandItem,'fa-caret-down': d.expandItem, 'fa-lg': true}"></i></td><td>{{d.delivery|removeLeadingZeros}}</td><td>{{d.customer}}</td><td>{{d.shipTo|removeLeadingZeros}}</td><td>{{d.soNumber|removeLeadingZeros}}</td><td>{{d.dispatchTime| date:'MM/dd/yyyy hh:mm a'}}</td><td>{{d.carrier}}</td></tr><tr [hidden]='!d.expandItem'><td style="background-color: white"></td><td colspan="7" style="padding:0px"><table class="table table-striped" style="margin-bottom: 0px;"><thead><tr><th style='width:10%' class="rightjustified">Line</th><th style='width:16%'>Material</th><th style='width:30%'>Description</th><th style='width:14%' class="rightjustified">Qty</th><th style='width:10%'>UoM</th><th style='width:20%'></th></tr></thead><tbody><ng-template ngFor let-line [ngForOf]="d.lineItems" let-i="index"><tr><td class="rightjustified">{{line.line}}</td><td>{{line.material}}</td><td>{{line.description}}</td><td class="rightjustified">{{line.qty | number:'1.3'}}</td><td>{{line.uoM}}</td><td></td></tr></ng-template></tbody></table></td></tr></ng-template></tbody></table></td></tr></ng-template></tbody><tfoot><tr><td colspan="11"><rt-status-progress><progress-bar></progress-bar></rt-status-progress><rt-status-no-data class="text-center">0 records found</rt-status-no-data><div><rt-status-done><rt-buffered-pager [defaultRowCount]="20" #rtPager><span>{{rtPager.pager.loadedCount}} record{{rtPager.pager.loadedCount > 1 ? 's' : ''}}found</span><a *ngIf="rtPager.canLoadMore" tabindex="0" (click)="rtPager.loadMore()"rtPreventDefaults="click" [class.hidden]="!rtPager.canLoadMore" [rtInfinite]="window"href="#">Show more</a></rt-buffered-pager></rt-status-done></div></td></tr></tfoot></table>
</div>
<div class="text-center text-muted" *ngIf="noRecord" style="padding-top:300px"><img src="/assets/queue.png" /><br><br><p style="margin-bottom:0px">There are no Handling Units in this queue.</p>
</div>

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;

Angular4_层级表格，表头固定相关推荐

完美解决html表格表头固定存在的问题
完美解决html表格表头固定存在的问题当表格数据较多出现滚动条时,很多地方都有固定表头的需求.在网上查找资料,发现了一个比较简洁的方法. 代码如下: 1.css样式: th{backgroun ...
css方法实现表格表头固定，横向纵向可滑动
介绍一种用css实现表格表头固定,横向纵向可滑动的方法先用一个div把表格包起来,表格给定高宽,overflow:scroll. 然后给表头写一个黏性布局 position: sticky:top: ...
bootstrap 表格表头固定
效果效果是在pc端和移动端能够使表格的表头固定,并且在顶部,支持缩放时布局不乱. 核心技术利用css的position:fixed 属性来脱离文档流,达到表头固定的效果. 代码说明都在代码里面, ...
html ＜table＞表格表头固定内容滚动代码拿去就能用
纯 html.css代码写的 table 表格先来看下pc端的效果图移动端的效果图,前面两张是静态图,第三张是gif动态图 (像素失真了 •︿• ) 公司的移动端项目,用的是react,页面需求是 ...
div+css实现表头固定内容滚动表格
<div class="m-demo"><table><thead><tr><th>定宽a</th>< ...
css固定表格表头(各浏览器通用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...
html css 表头,css固定表格表头(各浏览器通用)
固定表格表头 div{ overflow-y: scroll; overflow-x: hidden; height: 100px; margin-top: 5px; margin-left: 12p ...
CSS实现表格表头（thead）固定，内容（tbody）滚动
前言最近在写一个项目,然后要实现表头固定,tbody内容滚动的效果,该项目中没有使用任何插件,并且表格列数蛮多的,刚开始实现起来遇到各种问题,感觉蛮复杂的,后来找到了一种利用transform的方法 ...

Angular4_层级表格，表头固定

Angular4_层级表格，表头固定相关推荐

最新文章

热门文章