I am looking to achieve a layout where the top div is fixed at the top of the screen and the second div is scrollable below it. Both divs should have the same column width.
I attempted to use position: fixed, but the columns are not aligned directly beneath each other as desired.
The current issue can be seen here:
https://i.sstatic.net/qHKLy.jpg
This is the desired outcome:
https://i.sstatic.net/XR2oh.jpg
Here is an example of the code:
td,
th {
width: 4%;
text-align: center;
vertical-align: middle;
word-break: break-word;
}
.mainContainer {
display: flex;
flex-direction: column;
height: 100%;
padding: 0 1rem 0 1rem;
background-color: blueviolet;
}
.fixed {
position: fixed;
height: 7rem;
padding: 0 1rem 0 1rem;
background-color: orange;
}
.scrollable {
margin-top: 7rem;
background-color: lightgreen;
}<div class="mainContainer">
<div class="fixed">
<table style="table-layout: fixed;">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Company 1</td>
<td>Contact 1</td>
<td>Country 1</td>
</tr>
<tr>
<td>Company 1</td>
<td>Contact 1</td>
<td>Country 1</td>
</tr>
</table>
</div>
<div class="scrollable">
<table style="table-layout: fixed;">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Company 1</td>
<td>Contact 1</td>
<td>Country 1</td>
</tr>
<tr>
<td>Company 1</td>
<td>Contact 1</td>
<td>Country 1</td>
</tr>
</table>
</div>
</div>