1
私はテーブルを作成しようとしています。ユーザーがトップダウンでスクロールするとヘッダーがスティックされ、ユーザーがスクロールするとサイドバーがスティックします。そのうち2つはいつでも見ることができます。それらのどれもがあるため、さらなる説明のためにスクロールしない限りサイドバースティックをテーブルに残すには？ （純粋なCSS）
私の画像を確認してください
をスクロールするので隠さなかっます。
リンクをチェックしてください：fiddle
は、私がこれだけ使ってCSSを達成していきます。
.scrolltable {
overflow-x: scroll;
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.scrolltable > .header {}
.scrolltable > .body {
/*noinspection CssInvalidPropertyValue*/
width: -webkit-fit-content;
overflow-y: scroll;
flex: 1;
-webkit-flex: 1;
}
th,
td {
min-width: 150px;
}
#constrainer {
width: 400px;
height: 400px;
width: 89%;
height: 400px;
margin-left: 149px;
height: 85vh;
}
.scrolltable .header{background:none;}
.left-sticky{
position: absolute !important;
left: 17px;
width: 138px !important;
max-width: 138px !important;
}
table tr td{text-align:center}<div class="table-section-area table-section-area-bottom" id="main-bottom-table">
<div class="">
<div id="constrainer">
<div class="scrolltable">
<table class="header table-striped unique-table ">
<thead>
<tr>
<th overdata="true" colspan="1" class="left-sticky">
<div>(S)</div>
</th>
<th>
first
</th>
<th>
second
</th>
<th>
first
</th>
<th>
second
</th>
<th>
first
</th>
<th>
second
</th>
<th>
first
</th>
<th>
second
</th>
</tr>
</thead>
</table>
<div class="body">
<div>
<table>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
<tr>
<td class="left-sticky">leftbar</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
<td>3434</td>
<td>1434</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
「ユーザがテーブルをスクロールしない限り、左側のサイドバーをスティックにする」と言ったとき、実際には「しない」の代わりに「いつ」または「中」を意味しますか？あなたの文章がこのように置かれていると、ユーザーがスクロールするときにサイドバーがくっついてはならないということを意味し、それはあなたが望むのと逆の感情を持っています... – webeno
こんにちは、私の画像リンクをチェックしてください。私は何を意味しているのですか左サイドバーはトップダウンスクロールで、トップヘッダーは右スクロールで動きます。 – user5421756
質問を更新したいかもしれませんが、それはあまり明確ではありません。 – webeno