I am trying to fix the position of a TR element when scrolling down, but I am facing an issue where the fixed TR is overflowing and going out of the table.
I have created a container with a fixed width, but I cannot seem to get the table to only display within the width of the container.
This is a basic example. Can anyone help me with this?
body{
height: 900px;
}
.fixedhead{
background:red;
position:fixed;
top: 0px;
}
.container{
width: 100px;
overflow-x: hidden;
}
.container.blue{
background: blue;
}<div class="container">
<div class="fixedhead">
<table>
<tr>
<td>Some very long text here,</td>
<td>bigger than the container div</td>
<td>but it should only show as much as the container div</td>
<td>and still be fixed to the top</td>
<td>bla</td>
<td>bla</td>
<td>bla</td>
<td>bla</td>
<td>bla</td>
</tr>
</table>
</div>
</div>
<br>
<hr>
<br>
<div class="container blue">
it should only show up to here
</div>Thank you all