Although I know there are multiple ways to write this code, I have attempted (and fixed) it. Since I'm not well-versed in front-end development, I am finding this task to be quite challenging. I discovered that placing the table header within a table itself and setting the table body to scrollable -y worked for me. However, I also need to align columns based on a user's selection from a dropdown menu. If I could find a solution without having to do that, it would greatly enhance the appearance of the table, but so far, I haven't found a fix for it.
<div v-if="globals.showStructure === true" style="border: 1px solid red; max-height:500px; overflow-y:scroll; position: top;" id="tableContainer2">
<table class="table table-bordered">
<ul class="right-click-menu" tabindex="-1" v-if="globals.viewActiveStructMenu === true" ref="activeStructure">
<li v-on:click="deleteStructure()">Delete</li>
<li v-on:click="pendStructure()">Pend</li>
</ul>
<ul class="right-click-menu" tabindex="-1" v-if="globals.viewPendStructMenu === true" ref="pendStructure">
<li v-on:click="deleteStructure()">Delete</li>
<li v-on:click="activateStructure()">Activate</li>
</ul>
<thead>
...
<th>Your Header Text Here</th>
...
</thead>
<tbody>
...
<td>Your Data Here</td>
...
</tbody>
</table>
</div>
Your CSS can be included here if necessary for styling purposes.