Bootstrap4 allows for a scrollable table body feature

Why am I unable to apply scroll for the table body with a fixed header using Bootstrap-4? I have used min-height and overflow properties to achieve this, but it doesn't seem to work. Does Bootstrap4 not support scrolling on table bodies? The snippet below provides more clarity on the issue.

Could someone point out where I might be going wrong?

.tbody {
  min-height:10px;
  overflow-y:scroll;
}
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js></script>
  
  <div class="container>
          
  <table class="table table-bordered>
    <thead>
      <tr>
        <th>Firstname</th>
        <th> Lastname</th>
        <th> Email</th>
      </tr>
    </thead>
    <tbody class="tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e242126200e2b362f233e222b602d2123>[email protected]</a></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d707c6f645d78657c706d7178337e7270">[email protected]</a></td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__"data-cfemail="d2b8a7beab92b7aab3bfa2beb7fcb1bdbf">[email protected]</a></td>
      </tr>
    </tbody>
  </table>
</div>

htmlcssbootstrap-4

Answer №1

Once the display:block property is applied to a table, you have the ability to adjust its height and width as needed.

Give this a shot:

table {
  display:block;
  height : <specify your preferred height>;
  overflow-y : scroll;
}

Answer №2

I trust this fulfills your requirements

.tbody {
  height: 50px !important;
  overflow-y: scroll;
}
   
.my-tbody {
  height:30px;
  display:block;
  overflow-y:scroll;
  width:100%;
}

tbody {
  width: 100%;
}

tr {
  width: 100%;
}

td {
  width: 33.33%;
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  
  
  <div class="container">
          
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <table class="my-tbody">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88e2e7e0e6c8edf0e9e5f8e4eda6ebe7e5">[email protected]</a></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8c5c9dad1e8cdd0c9c5d8c4cd86cbc7c5">[email protected]</a></td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f19b849d88b19488909c819d94df929e9c">[email protected]</a></td>
      </tr>
      <div class="cl"></div>
    </table>
  
  </table>
</div>

Answer №3

or you have the option to utilize this method:

.tbody {
  height: 50px !important;
  overflow-y: scroll;
}

.my-tbody {
  height:50px;
  display:block;
  overflow-y:scroll;
  width:100%;
}

tbody {
  width: 100%;
}

tr {
  width: 100%;
}

td {
  width: 33.33%;
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div class="container">

  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <table class="my-tbody">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e18b8e898fa18499808c918d84cf828e8c">[email protected]</a></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="117c706368517469707c617d743f727e7c">[email protected]</a></td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef859a8396af8a978e829f838ac18c8082">[email protected]</a></td>
      </tr>
      <div class="cl"></div>
    </table>

  </table>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are you experiencing difficulties with coding text emails?

I am currently in the process of sending an email with an attached PDF file. Here is the code snippet I am using: $mpdf->WriteHTML($html); $content = $mpdf->Output('', 'S'); $content = chunk_split(base64_encode($content)); $ ...

phphtml

What's causing my text to slowly appear while my HTML canvas remains static and unchanged?

Can someone take a look at my code: http://jsfiddle.net/7y9Gp/2/ I've been struggling with trying to fade in and out text or images, but for some reason, my canvas object refuses to cooperate. I've tried swapping the position of the canvas with ...

htmlcsshtml5-canvasfadein

Photographs featuring a ripple effect in the columns of Zurb's Foundation framework

Working on a WordPress site using the Foundation 6 CSS framework, I have a design with a row containing two large-6 columns, each filled with an image featuring a wave shape. Check out the image I've linked below. View the row with 2 columns I' ...

htmlcsswordpressimagezurb-foundation

Sass compilation failed due to an error in the CSS code provided

Just starting out with sass, I recently downloaded bulma, installed gem, and sass. My attempt to compile a default sass file using sass style.scss style.css resulted in errors. Here is my directory structure: https://i.sstatic.net/0OZSR.png However, I en ...

csssass

Scrolling to the complete height of a div using scrollTop

Experience an automated scroll to the bottom of the div, followed by a smooth upward motion over 5 seconds, all while looping seamlessly. A small issue arises where the code only recognizes the standard height set for the div, not its actual scrollable he ...

javascriptjqueryhtmlscrollscrolltop

What techniques can I use to merge alpha channels with compositing in images?

Utilizing an HTML5 Canvas along with the KineticJS(KonvaJS) canvas library, I have successfully incorporated an Image element. My current objective is to erase specific pixels while maintaining a certain level of transparency. The red dot erases pixels at ...

javascripthtmlcanvaskineticjskonvajs

Change the input field to uppercase using JavaScript but do not use inline JavaScript

Hey there! I have a basic script set up (see below) with an input field allowing users to enter a query. This query is then sent to a socrata webservice to request specific data, which is displayed in an alert box. So far, everything works smoothly. var l ...

javascriptjqueryhtmljson

having difficulty placing 3 pop-up windows on a single page

Struggling to implement multiple popups on my page, each with a unique ID assigned. Any assistance would be greatly appreciated. Here is the code snippet: .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { font-size:20px; t ...

javascripthtmljquerycss

How to animate a left border shifting to the center using JavaScript

As I'm modifying my current div, I need to add a vertical line in the center of it. I've come across various solutions where a left border is added and then shifted using the left property by 50% (which effectively places it in the middle). Here ...

javascripthtmlcsssimple-html-dom

What are some alternatives to using iframes?

Currently, I am working on a project for a client where I need to display multiple websites on a single page in a browser. To achieve this, I initially used the iframe element, but encountered an issue with the openerp frame. Despite setting up the openerp ...

javascripthtmliframeodoo

Having trouble extracting data from Moz Bar through selenium using Python?

Having trouble retrieving the spam score from Moz bar using Selenium WebDriver? I've attempted various methods such as XPath, class, and tag name without success. Any assistance would be greatly appreciated: from selenium.webdriver.common.by import By ...

pythonhtmlcssselenium-webdriverselenium-chromedriver

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

javascriptjquerycsssyntax

The table is too large for the parent div in which it is placed, causing

Check out this example I have for putting a table in a div and making it fill the div: ex1_jsfiddle table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; height: 100%; table-layout: fixed; } td, th { border: 1px sol ...

htmlcss

Identifying selected shapes in CSS/Javascript by outlining them with small rectangles placed on each corner

Currently, I am working on a University Project that involves creating a selection function for drawn shapes such as rectangles, circles, lines, or triangles. The challenge lies in figuring out the visualization of the selection when a shape is clicked. T ...

javascripthtmlcss

"Enhancing User Experience with Multiple Conditional Checkboxes in jQuery

Having difficulty making a checkbox change some HTML content using JQuery. There is a standard html checkbox with the following attributes <input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN10" id="3mcq"> <input type="checkbox" nam ...

javascriptjqueryhtml

Creating an opaque effect on a Material UI Drop down menu: Step-by-step guide

For the last half hour, I've been experimenting with my Select dropdown menu in an attempt to make it semi-transparent, but without success. I've tried adjusting the properties of the Paper, then the Menu, and then the MenuList, yet it appears th ...

cssreactjsmaterial-ui

Is it feasible to utilize HTML files to fetch information from a MYSQL database by utilizing PHP on the server?

I am trying to set up a form in an HTML file called index.html that includes some AJAX code linking to PHP for MySQL database connectivity. The idea is for clients to be able to insert, delete, and edit data in the database by filling out the form on index ...

phphtmlajaxdatabasemysqli

Vagrant Nimble Selections

Can anyone explain why my navigation bar is appearing below the header instead of beside the logo? I dedicated an entire day yesterday to designing a page with the same layout. Everything is identical in terms of design and coding, except that I initially ...

htmlcsslayout

What consequences could occur in HTML if the main tag is not properly enclosed within the body tag?

Just starting out. While working with HTML, I experimented with placing the main tag outside of the body tag instead of nesting it inside as recommended by HTML5 standards. To my eye, both versions looked identical when I viewed the HTML file side by sid ...

html

Is there a way for me to duplicate a complex element multiple times within the same page?

As an illustration, let's say I have a social tab located in my header that I would like to duplicate in the footer. This tab is comprised of various buttons with SVG images on top, event listeners linked to button IDs, and CSS styling. One option is ...

javascripthtmlcssrepeatcopying