I am currently working on a table that is populated using the vue.js v-for method:
<table>
<tr><th>Name</th><th>Surname</th></tr>
<tr v-for="user in users"><td>@{{user.name}}</td><td>@{{user.surname}}</td></tr>
</table>
My requirement is to limit the height of this table to a maximum of 300px, and enable scrolling if it exceeds this height.
Setting the max-height and overflow:auto properties in my CSS hasn't been effective due to the way the table is rendered dynamically with vue.
I have attempted adding these parameters directly in CSS and applying them dynamically after loading the table, but without success.
However, I discovered that calling $('table').height() returns the actual height of the rendered table. Perhaps there is a way to leverage this information?
Your assistance in resolving this issue would be greatly appreciated!