如何将垂直滚动条添加到始终固定第一列的表中

Question

我正在研究解决方案。

我创造了一张桌子;每当用户水平滚动时，它的第一列将始终固定。

但是现在我还面临另一个问题，即如果记录太多，用户必须到页面末尾水平滚动。

是否可以仅使用CSS进行垂直滚动？

这是我的代码：

<style>
   .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;
   }
</style>
<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>

这是一个相同代码的jsfiddle：https://jsfiddle.net/vjg0a7o8/

Answer 1

是否可以仅使用CSS进行垂直滚动？

简短回答：是的，但我们首先分析问题：

为了表明这一点，我做了一个你的最小例子（我使用了一个真正的table而不是divs并选择了一个稍有不同的布局，但问题仍然是相同的并且也适用于你的代码片段）。

.wrapper {
  display: flex;
  overflow: auto;
}

.sticky-left {
  text-align: left;
  left: 0;
  position: absolute;
}

.sticky-left td {
  max-width: 200px;
  min-width: 200px;
  background: lightgrey;
}

thead th {
  padding: 15px 5px;
  background: #f4f3f8;
  font-size: 14px;
  border: none;
  color: #575962;
  max-width: 200px;
  min-width: 200px;
}

.content-table {
  margin-left: 200px;
}

<div class="wrapper">
  <table class="sticky-left">
    <thead>
      <tr>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
      </tr>
    </tbody>
  </table>
  <table class="content-table">
    <thead>
      <tr>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
      <tr>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
        <td>January</td>
      </tr>
    </tbody>
  </table>
</div>

如果内容溢出flow，则会向元素添加滚动条。换一种说法：

overflow property指定当元素的内容太大而无法放入指定区域时是剪辑内容还是添加滚动条。

Source。

---

Problem #1

因此，第一种方法是仅通过使表更小来在y轴上添加水平滚动条。所以，让我们： 将height: 200px（或任何你想要的大小）添加到.wrapper类。

https://jsfiddle.net/gwz3rce6/ （我必须使用JSFiddle，因为如果我每次都添加代码片段，将超出字符限制）

乍一看似乎非常有希望。滚动条就在您想要的位置。 问题是：由于我们添加了position: absolute和left: 0，因此左侧的固定列不流动。问题是position: absolute使用文档正文，并且随着页面滚动而移动，只要它不在定位的祖先（例如，具有position: relative的父元素）内。

Problem #2

那么为什么我们不把position: relative添加到.wrapper？然后，固定柱应位于容器内部，并且不应将其自身定位在文件主体上。 嗯，确实如此！

https://jsfiddle.net/gwz3rce6/1/

但这导致了问题！左栏不再固定......为什么？现在它有点复杂：

为了理解这个问题，让我们想象左栏实际上在.wrapper元素之外，我们在第一个例子中将它定位为absolute。在问题＃1中你仍会遇到问题，但至少你不会遇到问题＃2开头所描述的问题。所以左列实际上固定在左侧。

请注意，此处有两个容器：具有垂直滚动条和文档的表。通过滚动表格，它现在不会对左列产生影响，因为它位于表格之外，因此与之无关。这就是position: absolute所做的。如果它不在定位容器中（例如position: relative），它会模拟容器外部的元素。

由于它在文档中定位自己，如果向body添加滚动条，则会产生影响。

所以我们再将左列放入容器内。通过添加position: relative，绝对定位元素只能在此容器内移动，并且不会在文档中定位自身。这就是为什么它现在位于容器内部而不是外部（如问题＃1）。但这也是它不再被修复的原因。这就是为什么在主体上添加滚动条会对问题＃1中的左列产生影响的原因。

是的，它有点难以理解......但也很难用文字表达。我仍然希望你从中学到了一些东西并且它回答了你的问题，即使我还没有提供解决方案。

这项任务也有一些不同的方法，但这些方法都没有（除了我现在要描述的那个），我介绍了最有希望的方法。此外，如果我做错了什么并且忽略了某些东西，请随意发表评论。

---

Solution

这个问题的解决方案是使用position: sticky。

https://jsfiddle.net/zvgn7u49/

在你的情况下，你会将其添加到.tg .sticky-col-1类而不是position: absolute。

具有position: sticky;的元素基于用户的滚动位置定位。

根据滚动位置，粘性元素在relative和fixed之间切换。它被相对定位，直到在视口中满足给定的偏移位置 - 然后它“粘住”到位（如position:fixed）。

Source。

但是，要小心，因为它缺乏对特定元素的浏览器支持。某些浏览器（如Safari）也需要-webkit-前缀。您可以获得更多信息here。

编辑：当我为你的代码做一个小提琴时，我发现@Icaro Heimig已经涵盖了这个解决方案并且也做了笔。

我在codepen上做了一个例子：https://codepen.io/icaromh/pen/gyJdvZ

Answer 2

您可以创建一个模拟滚动条的元素，并将其放在您想要的位置。如果不使用JS，就不可能获得理想的结果。

或者尝试使用jquery.doubleScroll

$(document).ready(function(){
  $('#double-scroll').doubleScroll();
});

#double-scroll{
  width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="double-scroll">
  <table id="very-wide-element">
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

注意：:)成功:)成功:)成功:)成功

<html>

<head>
    <style>
        body {
            font-size: 200px;
            color: chartreuse;
        }

        .par {
            background-color: black;
            width: 5000px;
            height: 5000px;
            display: flex;
        }

        .left-side {
            background-color: red;
            width: 300px;
            height: 3000px;
        }

        .right-side {
            width: 50%;
            height: 2000px;
            background-color: blue;
        }

        #sticky {
            position: sticky;
            left: 0;
        }
    </style>
</head>


<body>
    <div class="par">
        <div class="left-side" id="sticky">left</div>
        <div class="right-side">right</div>
    </div>
</body>

</html>

Answer 4

是否可以在您的应用程序上使用粘贴位置？

我在codepen上做了一个例子：https://codepen.io/icaromh/pen/gyJdvZ

如果可以使用position: sticky，那么很容易在代码中重现它：D

编辑：我删除了很多overflows并仅应用于父div。此外，我修改了一些z-index所以标题和第一个col出现正确。

我可以使用：https://caniuse.com/css-sticky

Answer 5

只能通过css在x和y轴上同时使用x固定列和滚动条。

滚动条可以位于div的底部或右侧，或两者兼而有之 - 我已经尝试过各种方式：

outter div滚动条可能隐藏内部div滚动条 - 不可接受。这是因为内部滚动必须位于div的边缘，并且可以滚出边界。在css中同时拥有两个滚动条的唯一可能性是将它设置在同一个div上：

overflow-x: scroll; overflow-y: scroll;

..等于......

overflow: auto;

这很好用！所以现在你想要一个固定的列？唯一的方法是位置：绝对，固定或粘性。这些是从文档中分离元素的唯一方法。并且这些都不能仅分离x轴或y轴以在另一轴上可滚动。

使用css尽可能地做到这一点，并通过一小段javascript将面板固定到文档。关闭javascript的用户可以为列添加额外的垂直滚动条。

Answer 6

.tg-wrap{
         height:100vh; /*covers whole screen*/
         overflow:scroll;
        }

Answer 7

您是否尝试将标题/第一列放在单独的.html文档上，然后将其余列放到另一个文档上。然后创建第三个.html文件并添加两个iframe。这是一种基本方法。

Answer 8

我想我有一个解决方案。

将其添加到您的CSS中。

**** CSS *****

.tg-wrap{
    width: 100%;
    position: absolute;
    height: 50%;
    overflow-y: scroll;
}

并从.zui-scroller中删除width：890px属性。

注意：我添加了50％仅用于演示目的。你可以设定你的身高。希望这可以帮助！