I have a table where i try to make the tbody scroll if it's greater than 1000px.
I've tried the following:
.fixed_header tbody{
display:block;
overflow:auto;
height:1000px;
width:100%;
}
.fixed_header thead tr{
display:block;
}
The scroll works, but it ruines my style.
Before
After
Live Result: https://www.bunlongheng.com/baby/1?code=rithys4k&date=2021-03-01
How do I keep the scrolling but let the rest of the page remain fixed?
Code
<table class="table fixed_header">
<thead class="thin-border-bottom">
<tr style="border-top: 0px; border-bottom: 0px; box-shadow: none;">
<th>Type</th>
<th>Time</th>
<th>Note</th>
</tr>
</thead>
<tbody class="tbody-log">
<tr data-type="feed" style="border-top: 0px; border-bottom: 0px; box-shadow: none;">
<td>
<a class="btn btn-feed">
<img class="logIconSmall" src="/assets/be/img/baby/feed.png?q=0.05347300 1616851924">
</a>
</td>
<td>
<a data-toggle="modal" data-target="#edit_446" data-backdrop="static" data-keyboard="false" type="button" class="btn btn-link">
01:59 am
</a>
<div class="modal fade" id="edit_446">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-2 col-md-offset-5 col-md-2 text-center">
<img width="80" src="/assets/be/img/baby/feed.png">
<br><br><br>
<input type="text" value="01:59:50" name="updatedAt" width="100%" height="80">
<br><br>
<button onclick="updateLog(446)" class="btn btn-success btn-block">Done</button>
<br>
<button onclick="deleteLog(446)" class="btn btn-danger btn-block">Delete</button>
</div>
</div>
</div>
</td>
<td id="td-446">
<span style="font-weight: bold; color:#00ff5c;">+36955.2m </span>
</td>
</tr>
</tbody>
</table>
Edit
The goal on mobile is to let the content have the full width and not to have space below the table.
