航班列表可视区域渲染

src/app/pages/main/main.component.scss

@@ -7,6 +7,7 @@
     background-color: #fff;
     .page-content {
         border: 1px solid #ccc;
+        height: 100%;
         padding: 10px 20px;
         .search-filter {
             position: relative;
@@ -24,7 +25,8 @@
                     }
                 }
             }
-            .second-condition,.third-condition{
+            .second-condition,
+            .third-condition {
                 display: none;
             }
             .input-container {
@@ -34,50 +36,85 @@
                     display: inline-block;
                 }
             }
-            .filterClose-c{
+            .filterClose-c {
                 display: none;
             }
-            .filterClose-o{
+            .filterClose-o {
                 display: flex;
             }
         }
         .airline-table {
             .table-container {
                 display: inline-block;
-                // border: 1px solid #ccc;
+                // position: relative;
                 width: 100%;
-                height: 700px;
-                overflow: auto;
+                // overflow-x: auto;
+                overflow-y: hidden;
                 box-shadow: 0 0 1px 0.5px #ddd;
-                table {
-                    width: max-content;
-                    tr {
-                        cursor: pointer;
-                        &.selected {
-                            background: rgb(181, 215, 255);
+                .table-head {
+                    overflow: hidden;
+                    overflow-y: scroll;
+                    height: 42px;
+                    table {
+                        margin: 0;
+                        width: max-content;
+                        th {
+                            background-color: #ddd;
+                            color: rgb(0, 0, 255);
                         }
                     }
-                    th {
-                        background-color: #ddd;
-                        color: rgb(0, 0, 255);
+                    &::-webkit-scrollbar {
+                        width: 15px;
+                        height: 15px;
                     }
-                    // th,td{
-                    //     // border: none;
-                    //     // text-align: center;
-                    // }
                 }
-                &::-webkit-scrollbar {
-                    width: 15px;
-                    height: 15px;
-                }
-                &::-webkit-scrollbar-thumb {
-                    /*滚动条里面小方块*/
-                    background: rgba(165, 207, 222, 1);
-                    border-radius: 10px;
-                }
-                &::-webkit-scrollbar-track {
-                    background: rgba(0, 0, 0, 0.06);
-                    border-radius: 10px;
+
+                .table-body {
+                    position: relative;
+                    // height: 600px;
+                    overflow: auto;
+                    width: 100%;
+                    .list-view-phantom {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        right: 0;
+                        z-index: -1;
+                    }
+                    table {
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        position: absolute;
+                        width: max-content;
+                        tr {
+                            cursor: pointer;
+                            height: 42px;
+                            &.selected {
+                                background: rgb(181, 215, 255);
+                            }
+                        }
+                        td {
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            border: none;
+                            // text-align: center;
+                        }
+                    }
+                    &::-webkit-scrollbar {
+                        width: 15px;
+                        height: 15px;
+                    }
+                    &::-webkit-scrollbar-thumb {
+                        /*滚动条里面小方块*/
+                        background: rgba(165, 207, 222, 1);
+                        border-radius: 10px;
+                    }
+                    &::-webkit-scrollbar-track {
+                        background: rgba(0, 0, 0, 0.06);
+                        border-radius: 10px;
+                    }
                 }
             }
             .airline-message {