how to set overflow-y to bootstrap-vue table's cell or row

Question

Hello friend i am using Bootstrap-vue to display my data that query from database and i want it to display with the overflow-y like thisenter image description here

so how should i do. please tell me if you guy know how to solve it and here it is my code

 <b-table
        :items="search_transfer"
        :fields="columnsheader"
        :current-page="currentPage"
        :per-page="perPage"
        class="tbsearch"
    ></b-table>

and here it is what i get. enter image description here

Answer 1

Table cells in general can be a pain to apply some stylings to (due to their default display: table-cell)

Based on your first image, it looks like they are using a wrapper element around their cell content (based on the padding present around the outside of the scrollable area).

Use a custom slot for the cell rendering, and wrap your content in a <div> element that has your overflow-y class:

<template>
  <b-table
    :items="search_transfer"
    :fields="columnsheader"
    :current-page="currentPage"
    :per-page="perPage"
  >
    <!--
      I am making an assumption that the field you want to scroll is `description`
    -->
    <template v-slot:cell(description)="scope">
      <div class="my-cell-overflow-y">
        {{ scope.value }}
      </div>
    </template>
  </b-table>
</template>

<style>
  .my-cell-overflow-y: {
    max-height: 2rem;
    overflow-y: auto
  }
</style>

See https://bootstrap-vue.js.org/docs/components/table#custom-data-rendering for details on custom data cell rendering.

Answer 2

Hi simple solution is to make it display:inline-block;

add the below css to it

.tbsearch > tbody > tr > td:nth-child(4){
 height: 65px;
 overflow: auto;
 display: inline-block;
}