1
Ich versuche, eine Tabelle zu erstellen, wo die Kopfzeile bleiben wird, wenn der Benutzer von oben nach unten scrollt und die Seitenleiste klebt, wenn der Benutzer von rechts nach links scrollt. Kurz gesagt, zwei von ihnen werden jederzeit sichtbar sein. Keiner von ihnen versteckt wird wegenWie wird die Seitenleiste in der Tabelle nach links gehalten, wenn nicht gescrollt? (reines CSS)
Bitte gescrollt wird mein Bild überprüfen
für weitere Erläuterungen.
Überprüfen Sie den Link: fiddle
Ich beabsichtige, nur diese mit CSS zu erreichen.
.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>
Wenn Sie sagen "Machen Sie die linke Seitenleiste Stick nach links, es sei denn der Benutzer scrollt die Tabelle" meinst du eigentlich "wann" oder "während" statt "außer"? Ihr Satz auf diese Weise bedeutet, dass die Seitenleiste nicht haften sollte, wenn der Benutzer scrollt, und ich habe das Gefühl, dass es das Gegenteil ist, dass Sie wollen ... – webeno
Hallo, bitte überprüfen Sie meinen Bildlink, den ich angehängt habe. Was ich meine Linke Seitenleiste bewegt sich in Bezug auf die oberen Scroll- und oberen Headerbewegungen mit Rechts-Links-Scroll. – user5421756
möchten Sie vielleicht die Frage aktualisieren, da das nicht sehr klar ist ... – webeno