CSS Floating Column Header

Question

Ich habe eine einfache Frage über CSS. In meinem Projekt habe ich eine lange Breitentabelle. Wie folgt aus:

Wie sehen Sie die untere Scroll nesesery ist. Die Prognose ist der Header für diesen Monat unter ihm. Auf dem zweiten Bildschirm sehen Sie die Situation, wenn ich bis zum Ende scrolle.

Im Moment befindet sich der Vorhersagetext in der Mitte der Zelle. Also, wenn diese Zelle viel länger sein wird, wird der Vorhersagetext nur sichtbar sein, wenn ich scrool in der Mitte bin. Meine Frage ist: Ist es möglich, diesen Text immer sichtbar zu machen, wenn ich auf dem Vorhersageabschnitt scrooliere und mit dem Scrool schwimme?

Answer 1

Als Lösung können Sie eine absolut positionierte Ebene mit transparentem Hintergrund erstellen.

einen Ausschnitt als Beispiel ein:

.div1 { 
 
    width: 400px; 
 
    height: 200px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    background-color: green; 
 
    color: yellow; 
 
} 
 
.div2 { 
 
    position: relative; 
 
    width: 1000px; 
 
    height: 170px; 
 
    background-color: yellow; 
 
    color: green; 
 
    top: 30px; 
 
} 
 
.hdr { 
 
    position: absolute; 
 
    left: 8px; 
 
    top: 8px; 
 
    text-align: center; 
 
    width: 400px; 
 
    height: 30px; 
 
    background: transparent; 
 
    color: white; 
 
}

<div class="div1"> 
 
    <div class="hdr">HEADER</div> 
 
    <div class="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis fringilla tellus. Pellentesque porttitor elit sit amet arcu efficitur, vel ultricies lacus posuere. Etiam sed quam quis 
 
tellus accumsan vehicula quis a enim. 
 
Donec volutpat, justo ut tempor facilisis, dui erat semper leo, vel facilisis libero arcu quis est. Mauris dapibus hendrerit porta. Sed non nisi libero. In hac habitasse platea dictumst. Aliquam erat volutpat. Etiam rhoncus, metus vel 
 
ultrices scelerisque, magna felis dignissim tellus, in suscipit neque diam eu libero. Fusce accumsan fringilla libero, ut auctor odio maximus vel. 
 
Aenean a venenatis leo, elementum varius enim. Donec vitae turpis sit amet magna aliquet pulvinar nec eget odio. Ut vitae ornare augue. 
 
Sed iaculis enim at scelerisque suscipit. Cras at tortor congue, vestibulum ipsum a, viverra lectus. Cras massa neque, commodo sed lacus id, convallis sodales urna</div> 
 
    </div>