Virtual Scroller in a table

Question

I am trying to put my RecycleScroller in a table and I can't make it work

  <RecycleScroller
    class="scroller"
        page-mode
        :items="store.clinicData.value[store.activeTabKey.value]"
        v-slot="{ item }"
        :key-field="'hsId'"
        :item-size="32"         
    >
        <div class="user">
            <p>{{ item.name }}</p>
            <p>{{ item.hsId }}</p>
        </div>
    </RecycleScroller>

<table class="table table-striped">

            <thead>

                <tr>
                    <th>HS Id</th>
                    <th>HS Name</th>
                    <th>Type</th>
                    <th>Maps to</th>
                    <th>Package</th>
                    
                </tr>

            </thead>

            <tbody>

            <tr v-for="i in store.clinicData.value[store.activeTabKey.value]">
            
                <td class="col-3" >{{i.hsId}}</td>
                <td class="col">{{i.name}}</td>
             
                
            </tr>
            
        </tbody>

        </table>

I tried putting the Scroller directly in the tr and it doesn't work everything goes in the Hs Id