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

Guide on displaying a real-time "Last Refreshed" message on a webpage that automatically updates to show the time passed since the last API request

I am having trouble with the functionality of my bootstrap navbar toggler

Step-by-step guide on crafting a harmonious row of a label and a responsive button group

The .keypress() function isn't behaving as expected

What could be causing this table to exceed its dimensions by 2 pixels?

Tips for incorporating background color with CSS pseudo-elements

Issue with the positioning of the datepicker is not functioning properly

What is the method for altering the text color within a disabled input field?

Exploring the utilization of props in single file components with Vue.js

Issue of inconsistency: The element is not connected to the page's document

Guide To Implementing vue-color Into Your NuxtJs Project

Flask Pagination : UnboundLocalError occurs when trying to reference a local variable 'res' before it has been assigned

Struggling with integrating a mixin in your Polymer project?

How can custom selectors be created in LESS?

Create a dynamic HTML page using JavaScript

Sending Email Form in PHP using JQuery and Ajax for seamless user experience

The issue of JQuery UI Dialog remaining open even after triggering it through an Input focus event

How can I prevent the expansion of elements in a drop-down menu when using display:

Organizing flex-items in a specific manner

Vue Bootstrap toaster that magically disappears in an instant