Hide the Scrollbar first
::-webkit-scrollbar {
display: none;
}
Set the CSS of <tbody>
Change the display property, so that the height and overflow-y can be configured.
Set the height, and add overflow-y to make the table body scrollable in a range.
tbody{
display: inline-block; // or block
height: 120px;
width: 100%; // Width follow the <table>
overflow-y: auto;
}
Set the CSS of <tr>, <th>, and <td>
Because we change the display of <tbody>, we also need to configure the width of each row and each element in <thead> and <tbody>.
<style>
tr{
display: flex;
}
th, td{
flex:1;
}
</style>
<table>
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Element</td>
</tr>
</tbody>
</table>
