How come the `table-fixed` class in Bootstrap isn't converting my table into a scrolling one?

Question

How come the `table-fixed` class in Bootstrap isn't converting my table into a scrolling one?

I am having some trouble with making my table scrollable. I have around 550 rows in the table and I am using the `table-fixed` style from bootstrap, but it doesn't seem to be working as expected. Additionally, the `table-condensed` class is not registering either. I have checked several examples and I can't figure out what's wrong - my code looks similar to those examples. Can anyone help me figure out what might be going on?

I removed the data from my example for brevity, but if you need it to troubleshoot, please let me know. Thanks.

  <div class="container pt-3">
    <div class="row">
      <div class="col-5 col md-5">
        <h1>Data</h1>
        <hr>
      </div>
    </div>
    <div class="row">
      <div class="col-md-8">
        <p>The following table includes all of the data used for plotting during this project</p>
      </div>
    </div>
    <div class="row">
      <div class="table-responsive-md">
        <table class="table table-bordered table-hover table-striped table-condensed table-fixed">
          <thead>
              ...
          </thead>
          <tbody>
               ...
          </tbody>
        </table>
      </div>
    </div>
  </div>

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

For your inquiry or comment, you will require the following:

A table with a fixed height (not equivalent to the height of the page)
The table must be scrollable

To achieve this, you need to assign the `table-fixed` class to the div containing the table as a child element; and for this particular class, the CSS properties should be: height:300px; overflow:scroll;

Refer to the functional snippet provided below:

.table-fixed {
  height: 300px;
  overflow: scroll;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container pt-3">
  <div class="row">
    <div class="col-5 col md-5">
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">

    </div>
  </div>
  <div class="row">
    <div class="table-responsive-md table-fixed">
      <table class="table table-bordered table-hover table-striped table-condensed ">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b3b6b1b799bca1b8b4a9b5bcf7bab6b4">[email protected]</a></td>
          </tr>
          [Additional table rows and data...]
      </table>
    </div>
  </div>
</div>

Answer 2

For your inquiry or comment, you will require the following:

A table with a fixed height (not equivalent to the height of the page)
The table must be scrollable

To achieve this, you need to assign the `table-fixed` class to the div containing the table as a child element; and for this particular class, the CSS properties should be: height:300px; overflow:scroll;

Refer to the functional snippet provided below:

.table-fixed {
  height: 300px;
  overflow: scroll;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container pt-3">
  <div class="row">
    <div class="col-5 col md-5">
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">

    </div>
  </div>
  <div class="row">
    <div class="table-responsive-md table-fixed">
      <table class="table table-bordered table-hover table-striped table-condensed ">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b3b6b1b799bca1b8b4a9b5bcf7bab6b4">[email protected]</a></td>
          </tr>
          [Additional table rows and data...]
      </table>
    </div>
  </div>
</div>

How come the `table-fixed` class in Bootstrap isn't converting my table into a scrolling one?

Answer №1

Similar questions

Guide to displaying a redirect from a CodeIgniter controller with an ID in PHP

I'm wondering if anyone has any insights as to why the CSS rule `body{ overflow: auto;}` is not functioning properly for me. Despite my attempts of adding a class to the body tag and

Tips for adjusting the font size on the Google Maps mapType controller

Dynamically Alter Notification Background

What is the reason position:sticky does not align elements to right:0?

Determine the variable height of a div containing dynamic content in order to execute a transform

Establishing the initial value for an input file form

Tips for verifying that a file has not been selected in Croppie

A structured HTML table featuring a secure header and stable left-hand columns, complete with knockout controls embedded in both the header and first

javascript - Retrieving a JSON string

Unable to determine the data type of the JSON object during the

Ensure the cursor is continually grabbing while moving items within a list using the @angular/cdk/drag-drop functionality

How can I create a unique CSS or JS transition for a button that dynamically changes size based on text

What is the best way to set up unique body backgrounds for each page in WordPress?

Guide on integrating jQuery for AJAX responses to gracefully transition into view within an MVC3 View

Ways to position Drop-down menu flush against the left edge of the webpage?

Having trouble implementing a CSS style for a Kendo-checkbox within a Kendo-treeview component

Tips for submitting multiple radio button values in a tabular format

In Chrome, there is a conflict between the screen width when using `position: absolute` and `position: fixed` if there is vertical

Can we keep a portion of the input placeholder content?