how to make sticky work at this situation? - html

Question

I want my table's first row and column sticky on the screen and there is another content before the table
the content before table can't scroll horizontally, and the table must can scroll horizontally and vertically
is there any way to do it without JavaScript?
.container {
width: 100%;
overflow-x: hidden;
display: flex;
flex-direction: column;
background: black;
}
.fixed-header {
width: 100%;
height: 100px;
color: aquamarine;
}
.table {
position: sticky;
top: 10px;
;
width: 100%;
height: 1000px;
background: blanchedalmond;
}
<div class="container">
<div class="fixed-header"></div>
<div class="table"></div>
</div>

Answer 1

You could add overflow-x: scroll; to .table in your CSS, as I did in the example below. Also, the table must not be a child of something for it to be sticky.
body {
background: black;
}
.container {
width: 100%;
overflow-x: hidden;
display: flex;
flex-direction: column;
background: black;
}
.fixed-header {
width: 100%;
height: 100px;
color: aquamarine;
}
.table {
position: sticky;
top: 10px;
overflow-x: scroll;
width: 100%;
height: 100px;
background: blanchedalmond;
}
#testContent {
color: white;
}
<div class="container">
<div class="fixed-header">
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eros ex, tristique in pretium a, pharetra sit amet risus. Nam in arcu sit amet augue vestibulum finibus et laoreet magna. Nam porta mi neque, a varius nisl tempus eu. Pellentesque faucibus nulla commodo felis porttitor, ut placerat tellus dignissim. Maecenas pulvinar efficitur fringilla. Morbi vitae eros lectus. Nullam ornare justo pellentesque scelerisque rutrum. Duis vel pretium elit. Pellentesque facilisis ultrices ultrices. Integer et consectetur velit. Vivamus vulputate auctor ipsum, sed volutpat odio vehicula ut.
Nulla eget erat quis ligula varius condimentum. Nam fringilla vel dolor vitae posuere. Nullam et rutrum mauris. Proin ultrices pharetra urna vel luctus. Aenean viverra commodo varius. Aliquam sed fringilla ex. Nunc vestibulum, leo vel pulvinar convallis, magna ex ornare mauris, id sodales nisi nisi eu metus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eleifend vitae arcu in efficitur. Donec felis leo, vulputate et tristique quis, suscipit eu augue. Maecenas non metus dignissim lacus hendrerit tempus non vel eros. Nam tempus nisl elementum, blandit velit id, viverra erat.
Etiam id quam nec purus vehicula ornare. Donec pretium, lectus et mollis dapibus, neque magna fermentum mauris, commodo rhoncus quam velit vitae dolor. Donec rutrum odio nec tincidunt pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis a mauris varius, vestibulum enim in, pulvinar est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin laoreet elit rutrum hendrerit tempus. Aenean condimentum erat eget quam finibus, non commodo enim suscipit.
In et laoreet enim, sed volutpat purus. Cras maximus enim purus, quis placerat justo iaculis eu. Phasellus eget nisl felis. Sed aliquam et elit non vehicula. Proin sem quam, dignissim in dui ac, faucibus tincidunt arcu. Phasellus blandit eros interdum est consequat, id fermentum mauris semper. Integer blandit nisi eget turpis mattis, a luctus orci laoreet. Donec porttitor, metus sollicitudin porta ullamcorper, metus quam consectetur dolor, ut cursus quam ligula vel ipsum. Integer vestibulum nisl ut elit porttitor, at congue turpis commodo. Sed facilisis velit justo, vel accumsan est convallis sit amet. Morbi volutpat risus eget pulvinar fermentum. Nam cursus ac tortor eu mattis.
Nam elit velit, volutpat ut ante id, aliquet dapibus felis. Pellentesque aliquet est ornare, vulputate magna non, vestibulum dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque dapibus nisi sit amet.<pre>
</div>
</div>
<div class="table">
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eros ex, tristique in pretium a, pharetra sit amet risus. Nam in arcu sit amet augue vestibulum finibus et laoreet magna. Nam porta mi neque, a varius nisl tempus eu. Pellentesque faucibus nulla commodo felis porttitor, ut placerat tellus dignissim. Maecenas pulvinar efficitur fringilla. Morbi vitae eros lectus. Nullam ornare justo pellentesque scelerisque rutrum. Duis vel pretium elit. Pellentesque facilisis ultrices ultrices. Integer et consectetur velit. Vivamus vulputate auctor ipsum, sed volutpat odio vehicula ut.
Nulla eget erat quis ligula varius condimentum. Nam fringilla vel dolor vitae posuere. Nullam et rutrum mauris. Proin ultrices pharetra urna vel luctus. Aenean viverra commodo varius. Aliquam sed fringilla ex. Nunc vestibulum, leo vel pulvinar convallis, magna ex ornare mauris, id sodales nisi nisi eu metus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eleifend vitae arcu in efficitur. Donec felis leo, vulputate et tristique quis, suscipit eu augue. Maecenas non metus dignissim lacus hendrerit tempus non vel eros. Nam tempus nisl elementum, blandit velit id, viverra erat.
Etiam id quam nec purus vehicula ornare. Donec pretium, lectus et mollis dapibus, neque magna fermentum mauris, commodo rhoncus quam velit vitae dolor. Donec rutrum odio nec tincidunt pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis a mauris varius, vestibulum enim in, pulvinar est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin laoreet elit rutrum hendrerit tempus. Aenean condimentum erat eget quam finibus, non commodo enim suscipit.
In et laoreet enim, sed volutpat purus. Cras maximus enim purus, quis placerat justo iaculis eu. Phasellus eget nisl felis. Sed aliquam et elit non vehicula. Proin sem quam, dignissim in dui ac, faucibus tincidunt arcu. Phasellus blandit eros interdum est consequat, id fermentum mauris semper. Integer blandit nisi eget turpis mattis, a luctus orci laoreet. Donec porttitor, metus sollicitudin porta ullamcorper, metus quam consectetur dolor, ut cursus quam ligula vel ipsum. Integer vestibulum nisl ut elit porttitor, at congue turpis commodo. Sed facilisis velit justo, vel accumsan est convallis sit amet. Morbi volutpat risus eget pulvinar fermentum. Nam cursus ac tortor eu mattis.
Nam elit velit, volutpat ut ante id, aliquet dapibus felis. Pellentesque aliquet est ornare, vulputate magna non, vestibulum dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque dapibus nisi sit amet.<pre>
</div>
<div class="container">
<div id="testContent">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
</div>