如何将垂直滚动条添加到始终固定第一列的表中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将垂直滚动条添加到始终固定第一列的表中相关的知识，希望对你有一定的参考价值。
我正在研究解决方案。
我创造了一张桌子;每当用户水平滚动时，它的第一列将始终固定。
但是现在我还面临另一个问题，即如果记录太多，用户必须到页面末尾水平滚动。
是否可以仅使用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/
答案
是否可以仅使用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>
<t以上是关于如何将垂直滚动条添加到始终固定第一列的表中的主要内容，如果未能解决你的问题，请参考以下文章