I am stuck in one problem
Basically i have created table which have n number of columns.
I have successfully created table having first column always fixed, so whenever user scrolls horizontal bar that column will stick to same position and rest of the content will scroll according to scroll position
I want to add fixed height and vertical scroll bar to that table as well
I have tried many solutions such as giving position fixed to wrapper or using position absolute as well. But in case of fixed position it stays in same position and i have other contents above that table such as graph and table filters, and if i give top css it work but as because of position fixed table stays at same position and i am not able to give more height than body height.
Here is my code and respective fiddle
.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>i want this div based table having fixed height with vertical scrollbar.
This thing is built on angular 5 and i do not want to add javascript patches to achieve functionality
