Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

Question

Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

Hello there, I am currently using Bootstrap-vue to display data that has been queried from a database. My goal is to have it displayed with an overflow-y style similar to this image.

If you know how to achieve this effect, please share your solution. Here is the code snippet I am working with:

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

Currently, the output I am getting looks like this: image

html css vue.js bootstrap-4 bootstrap-vue

Answer 1

Answer №1

One easy fix is setting it to display:inline-block;

Here's the CSS code to add:

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

Answer 2

One easy fix is setting it to display:inline-block;

Here's the CSS code to add:

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

Answer 3

Answer №2

Dealing with styling table cells can sometimes be tricky because of their default display: table-cell property.

From the initial image provided, it appears that a wrapper element is being used around the cell content to create padding around the scrollable area.

To customize the rendering of the cells, utilize a custom slot and wrap your content in a <div> element with the desired overflow-y style:

<template>
  <b-table
    :items="search_transfer"
    :fields="columnsheader"
    :current-page="currentPage"
    :per-page="perPage"
  >
    <!--
      It is assumed that the field you intend 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>

For more information on custom data cell rendering, visit .

Answer 4

Dealing with styling table cells can sometimes be tricky because of their default display: table-cell property.

From the initial image provided, it appears that a wrapper element is being used around the cell content to create padding around the scrollable area.

To customize the rendering of the cells, utilize a custom slot and wrap your content in a <div> element with the desired overflow-y style:

<template>
  <b-table
    :items="search_transfer"
    :fields="columnsheader"
    :current-page="currentPage"
    :per-page="perPage"
  >
    <!--
      It is assumed that the field you intend 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>

For more information on custom data cell rendering, visit .

Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

Answer №1

Answer №2

Similar questions

HTML Changing the background color of the body using HTML elements

Utilizing CSS3 to perform multiple 3D rotations

Equal dimensions for multiple div elements in both height and width

The Vuetify table encounters a loading error when trying to retrieve data

Is there a way to execute a code snippet just once when focusing on a specific field?

Tips on avoiding a page reload following a form submission using JQuery

Mastering the Zurb Foundation equalized grid: aligning content at the bottom of a div within a grid cell

What is the best approach to transfer information from the client side to a node

Ways to verify if an element includes a specific class in JavaScript

Is there a child missing? If so, add a class

Find all paragraphs with the CSS property "background-color" using JQuery

NextJS application failing to display SVG icon in the absence of internet connection

Troubleshooting a background image problem in a TailwindCSS configuration file

What is the best way to ensure that two div elements within a list element fully utilize the available width on a webpage?

Looking to create applications for Android and iOS that can integrate with a module designed in Adobe Captivate

Customize the text displayed for the number of rows per page in the footer of a v-data-table in Vuetify

Ways to show or conceal content using only CSS

Implementing a keypress function that can handle duplicate names

Converting data from Random.org into an integer using JavaScript

Utilizing JavaScript for manipulating arrays and displaying images