Yawning Milk Yawning Milk - 4 months ago 33
HTML Question

Scrollable table with Vue.js

So I have table which gets filled using 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>


And I need this table to be maximum
300px
in height, and if it gets longer, it becomes scrollable.

So basically I need to set
max-height
and
overflow:auto
parameters in my css, but the problem is that the code does not "see" this table appropriately because it is rendered with vue.

So far I've tried just adding parameters in css and adding them dynamically after loading the table; none of these worked.

But, if I call
$('table').height()
, it returns the actual height of the rendered table. Maybe I can use it somehow?

Would highly appreciate any possible help!

Answer

Can you wrap the table in a <div>?

This way the div controls the scrolling and the table is free to go it's own way.