我陷入一个问题
基本上我已经创建了具有n列的表。
我已经成功创建了第一列始终固定的表，因此，每当用户滚动水平栏时，该列将停留在相同位置，其余内容将根据滚动位置滚动
我也想向该表添加固定高度和垂直滚动条
我尝试了许多解决方案，例如将位置固定在包装器上，或者也使用绝对位置。但是在固定位置的情况下，它保持在相同的位置，并且我在该表格上方还有其他内容，例如图形和表格过滤器，并且如果我给出顶部css，则它可以工作，但是由于位置固定表保持在相同的位置，所以我无法比身高更多。
这是我的代码和相应的小提琴
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
/* width */
::-webkit-scrollbar {
width: 10px;
height:7px;
}
/* Track */
::-webkit-scrollbar-track {
background:#eaeaea;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #ccc;
}
.tg{
overflow:hidden;
word-break:normal;
display:table;
}
.tg .tg-29qf{
border-color:inherit;
text-align:left}
.tg .tg-xldj{
border-color:inherit;
text-align:left}
.tg .sticky-col-1{
left: 0;
position: absolute;
top: auto;
width: 445px;
}
.zui-scroller {
margin-left: 445px;
overflow-x: scroll;
overflow-y: visible;
width: 890px;
}
.tg .tg-kiyi{
border-color:inherit;
text-align:left;
min-width:150px;
display:table-cell;
padding: 7px 0px;
}
.tg .cover-head-cell{
min-width:300px;
text-align:center;
}
.tg .tg-29qf{
text-align:left;
min-width:100px;
}
.tg .tg-xldj{
border-color: inherit;
text-align: left;
min-width: 150px;
display: table-cell;
padding: 15px 0px;
}
.pad-l-r-15{
padding: 10px 5px !important;
}
.tg .tg-dvid{
border-color:inherit;
text-align:left;
vertical-align:top;
min-width:150px;
}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}
.report-row div {
}
.total-row div {
padding: 15px 5px !important;
background: #fff !important;
font-size: 14px !important;
color: #575962 !important;
font-weight: 500;
border-bottom:1px solid #ccc !important;
}
div.report-row.odd,
.sticky-col-1.odd {
background-color: #F5F5F5;
}
div.report-row.even,
.sticky-col-1.even {
background-color: #ffffff;
}
.report-row-header div {
padding: 15px 5px !important;
background: #f4f3f8 !important;
font-size: 14px !important;
border: none !important;
color: #575962 !important;
font-weight: 500;
}<div class="row" style="">
<div class="tg-wrap">
<div class="zui-scroller">
<div class="tg">
<div class="report-row-header ">
<div class="tg-kiyi sticky-col-1">#</div>
<div class="tg-kiyi">Impressions</div>
<div class="tg-kiyi">Conversion</div>
<div class="tg-kiyi ">Bids</div>
<div class="tg-kiyi ">Wins</div>
<div class="tg-kiyi">Spend</div>
<div class="tg-kiyi">eCPA</div>
<div class="tg-kiyi">eCPM</div>
<div class="tg-kiyi">Win Rate</div>
<div class="tg-kiyi">Clear Rate</div>
<div class="tg-kiyi">Actions</div>
</div>
<div class="total-row ">
<div class="tg-xldj sticky-col-1 text-right" style=" border-bottom: 1px solid #ccc !important;
height: 52px;"></div>
<div class="tg-xldj pad-l-r-15">62.36K</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">227.69K</div>
<div class="tg-xldj pad-l-r-15">108.45K</div>
<div class="tg-xldj pad-l-r-15">$ 64.11</div>
<div class="tg-xldj pad-l-r-15">$ 64.11</div>
<div class="tg-xldj pad-l-r-15">$ 64.11</div>
<div class="tg-xldj pad-l-r-15">$ 64.11</div>
<div class="tg-xldj pad-l-r-15">$ 64.11</div>
<div class="tg-xldj pad-l-r-15">N/A</div>
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(255, 255, 255);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(255, 255, 255);">
<span class="ng-tns-c0-0 ng-star-inserted">RTB_SA_INR_IOS</span>
</div>
<div class="tg-xldj pad-l-r-15">3.38K</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">6.32K</div>
<div class="tg-xldj pad-l-r-15">3.39K</div>
<div class="tg-xldj pad-l-r-15">$ 2.75</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.81</div>
<div class="tg-xldj pad-l-r-15">1.87 %</div>
<div class="tg-xldj pad-l-r-15">1.87 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(245, 245, 245);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(245, 245, 245);">
<span class="ng-tns-c0-0 ng-star-inserted">Grindr - Gay chat</span>
</div>
<div class="tg-xldj pad-l-r-15">6.44K</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">33.49K</div>
<div class="tg-xldj pad-l-r-15">22.47K</div>
<div class="tg-xldj pad-l-r-15">$ 17.30</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">2.69</div>
<div class="tg-xldj pad-l-r-15">1.49 %</div>
<div class="tg-xldj pad-l-r-15">5.20 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(255, 255, 255);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(255, 255, 255);">
<span class="ng-tns-c0-0 ng-star-inserted">TextNow - Unlimited Text + Calls</span>
</div>
<div class="tg-xldj pad-l-r-15">499.00</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">26.38K</div>
<div class="tg-xldj pad-l-r-15">25.39K</div>
<div class="tg-xldj pad-l-r-15">$ 11.08</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">22.21</div>
<div class="tg-xldj pad-l-r-15">1.04 %</div>
<div class="tg-xldj pad-l-r-15">52.86 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(245, 245, 245);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(245, 245, 245);">
<span class="ng-tns-c0-0 ng-star-inserted">iFunny :)</span>
</div>
<div class="tg-xldj pad-l-r-15">6.15K</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">9.41K</div>
<div class="tg-xldj pad-l-r-15">6.49K</div>
<div class="tg-xldj pad-l-r-15">$ 2.34</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.38</div>
<div class="tg-xldj pad-l-r-15">1.45 %</div>
<div class="tg-xldj pad-l-r-15">1.53 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(255, 255, 255);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(255, 255, 255);">
<span class="ng-tns-c0-0 ng-star-inserted">Wordscapes</span>
</div>
<div class="tg-xldj pad-l-r-15">10.49K</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">16.34K</div>
<div class="tg-xldj pad-l-r-15">10.87K</div>
<div class="tg-xldj pad-l-r-15">$ 5.24</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.50</div>
<div class="tg-xldj pad-l-r-15">1.50 %</div>
<div class="tg-xldj pad-l-r-15">1.56 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(245, 245, 245);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(245, 245, 245);">
<span class="ng-tns-c0-0 ng-star-inserted">Whisper - Share, Express, Meet</span>
</div>
<div class="tg-xldj pad-l-r-15">404.00</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">7.31K</div>
<div class="tg-xldj pad-l-r-15">400.00</div>
<div class="tg-xldj pad-l-r-15">$ 0.25</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.63</div>
<div class="tg-xldj pad-l-r-15">18.29 %</div>
<div class="tg-xldj pad-l-r-15">18.10 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(255, 255, 255);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(255, 255, 255);">
<span class="ng-tns-c0-0 ng-star-inserted">Mr Bullet</span>
</div>
<div class="tg-xldj pad-l-r-15">2.72K</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">5.62K</div>
<div class="tg-xldj pad-l-r-15">2.81K</div>
<div class="tg-xldj pad-l-r-15">$ 1.22</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.45</div>
<div class="tg-xldj pad-l-r-15">2.00 %</div>
<div class="tg-xldj pad-l-r-15">2.07 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(245, 245, 245);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(245, 245, 245);">
<span class="ng-tns-c0-0 ng-star-inserted">Trebel Music - Song Downloader</span>
</div>
<div class="tg-xldj pad-l-r-15">240.00</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">1.13K</div>
<div class="tg-xldj pad-l-r-15">233.00</div>
<div class="tg-xldj pad-l-r-15">$ 0.18</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.74</div>
<div class="tg-xldj pad-l-r-15">4.86 %</div>
<div class="tg-xldj pad-l-r-15">4.72 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(255, 255, 255);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(255, 255, 255);">
<span class="ng-tns-c0-0 ng-star-inserted">Musi - Unlimited Music For YouTube</span>
</div>
<div class="tg-xldj pad-l-r-15">11.21K</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">16.97K</div>
<div class="tg-xldj pad-l-r-15">15.64K</div>
<div class="tg-xldj pad-l-r-15">$ 7.80</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.70</div>
<div class="tg-xldj pad-l-r-15">1.09 %</div>
<div class="tg-xldj pad-l-r-15">1.51 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(245, 245, 245);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(245, 245, 245);">
<span class="ng-tns-c0-0 ng-star-inserted">Happy Color – Color by Number</span>
</div>
<div class="tg-xldj pad-l-r-15">4.36K</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">10.65K</div>
<div class="tg-xldj pad-l-r-15">4.40K</div>
<div class="tg-xldj pad-l-r-15">$ 3.96</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.91</div>
<div class="tg-xldj pad-l-r-15">2.42 %</div>
<div class="tg-xldj pad-l-r-15">2.44 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(255, 255, 255);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(255, 255, 255);">
<span class="ng-tns-c0-0 ng-star-inserted">Skout - Chat, Meet New People</span>
</div>
<div class="tg-xldj pad-l-r-15">448.00</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">1.25K</div>
<div class="tg-xldj pad-l-r-15">482.00</div>
<div class="tg-xldj pad-l-r-15">$ 0.24</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.53</div>
<div class="tg-xldj pad-l-r-15">2.59 %</div>
<div class="tg-xldj pad-l-r-15">2.79 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(245, 245, 245);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(245, 245, 245);">
<span class="ng-tns-c0-0 ng-star-inserted">Poke Genie for Pokemon Go Auto IV Calculator</span>
</div>
<div class="tg-xldj pad-l-r-15">201.00</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">735.00</div>
<div class="tg-xldj pad-l-r-15">228.00</div>
<div class="tg-xldj pad-l-r-15">$ 0.10</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.49</div>
<div class="tg-xldj pad-l-r-15">3.22 %</div>
<div class="tg-xldj pad-l-r-15">3.66 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(255, 255, 255);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(255, 255, 255);">
<span class="ng-tns-c0-0 ng-star-inserted">Sudoku - Classic Logic Game</span>
</div>
<div class="tg-xldj pad-l-r-15">646.00</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">1.77K</div>
<div class="tg-xldj pad-l-r-15">645.00</div>
<div class="tg-xldj pad-l-r-15">$ 0.41</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.64</div>
<div class="tg-xldj pad-l-r-15">2.75 %</div>
<div class="tg-xldj pad-l-r-15">2.74 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(245, 245, 245);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(245, 245, 245);">
<span class="ng-tns-c0-0 ng-star-inserted">Solitaire·</span>
</div>
<div class="tg-xldj pad-l-r-15">25.00</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">45.10K</div>
<div class="tg-xldj pad-l-r-15">18.00</div>
<div class="tg-xldj pad-l-r-15">$ 0.01</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.56</div>
<div class="tg-xldj pad-l-r-15">2.51K %</div>
<div class="tg-xldj pad-l-r-15">1.80K %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(255, 255, 255);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(255, 255, 255);">
<span class="ng-tns-c0-0 ng-star-inserted">UNICORN - Number Coloring Book</span>
</div>
<div class="tg-xldj pad-l-r-15">163.00</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">1.53K</div>
<div class="tg-xldj pad-l-r-15">195.00</div>
<div class="tg-xldj pad-l-r-15">$ 0.08</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.47</div>
<div class="tg-xldj pad-l-r-15">7.87 %</div>
<div class="tg-xldj pad-l-r-15">9.41 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
<div class="report-row ng-tns-c0-0 ng-star-inserted" style="background-color: rgb(245, 245, 245);">
<div class="tg-xldj sticky-col-1" style="background-color: rgb(245, 245, 245);">
<span class="ng-tns-c0-0 ng-star-inserted">theCHIVE</span>
</div>
<div class="tg-xldj pad-l-r-15">560.00</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">931.00</div>
<div class="tg-xldj pad-l-r-15">555.00</div>
<div class="tg-xldj pad-l-r-15">$ 0.44</div>
<div class="tg-xldj pad-l-r-15">0.00</div>
<div class="tg-xldj pad-l-r-15">0.79</div>
<div class="tg-xldj pad-l-r-15">1.68 %</div>
<div class="tg-xldj pad-l-r-15">1.66 %</div>
<div class="tg-xldj pad-l-r-15">
</div>
</div>
</div>
</div>
</div>
</div>
我希望此基于div的表具有固定高度和垂直滚动条。
这东西是基于angular 5构建的，我不想添加javascript补丁来实现功能