Creating a scrollable table body in Bootstrap 4

Question

Creating a scrollable table body in Bootstrap 4

I am struggling to make a large table mobile-friendly using Bootstrap 4. The table can have up to 10 columns and 100 rows. I need a CSS solution that achieves the following:

A fixed header with each column having the same width as its respective row
An x/y scrollable body when the width/height exceeds the container size
The header scrolls on the x-axis along with the table body
Rows should never wrap, regardless of device screen size
If possible, no JavaScript should be used

I haven't been able to find a suitable solution and would appreciate any help.

View the Jsfiddle example here

Table HTML

  
<table class="table table-hover table-striped table-bordered table-sm">
    <thead>
        <tr>
           // Columns
        </tr>
    </thead>
    <tbody>
        // Rows
    </tbody>
</table>

html css twitter-bootstrap responsive-design bootstrap-4

Answer 1

Answer №1

To make this happen, the key is to configure the @media Rules. To ensure that your table functions properly on smaller screens, you must assign a fixed width size and utilize the overflow-x: scroll property to allow scrolling when the content exceeds the boundaries of the table.

In order to achieve this, adjustments need to be made to the table's dimensions specifically for smaller screens where the device width is less than 576px, for instance.

The minimum width requirement for your table should be determined based on your design specifications. For example, instead of 768px, the min-width could be set to 992px or any other value you deem suitable.

Furthermore, the overflowing mechanism discussed earlier must be implemented accordingly.

Here is an example of how your media rules should look like now

when the minimum width of our table is 768px

:

@media (min-width: 576px) {  
    .table-sm {
        width: 768px;
        oveflow-x:scroll;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

Answer 2

To make this happen, the key is to configure the @media Rules. To ensure that your table functions properly on smaller screens, you must assign a fixed width size and utilize the overflow-x: scroll property to allow scrolling when the content exceeds the boundaries of the table.

In order to achieve this, adjustments need to be made to the table's dimensions specifically for smaller screens where the device width is less than 576px, for instance.

The minimum width requirement for your table should be determined based on your design specifications. For example, instead of 768px, the min-width could be set to 992px or any other value you deem suitable.

Furthermore, the overflowing mechanism discussed earlier must be implemented accordingly.

Here is an example of how your media rules should look like now

when the minimum width of our table is 768px

:

@media (min-width: 576px) {  
    .table-sm {
        width: 768px;
        oveflow-x:scroll;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

Creating a scrollable table body in Bootstrap 4

Table HTML

Answer №1

Similar questions

What are the specific files I should modify for HTML/CSS in my Ruby application?

Unforeseen Issues Arising from Media Queries

Creating a background image with linear gradients in Rails 5

What is the best way to recreate this base with shadow, highlight effects, and a color that's not flat?

Code for Rotating the Wheel - MINUS javascript

Display an HTML5 canvas element on a live webpage

I am looking to implement an animation that automatically scrolls to the bottom of a scrollable DIV when the page is loaded

Struggling with combining CSS stylesheets?

Link clicking causing webpage navigation issues

Do we always need to incorporate components in Vue.js, even if there are no plans for reuse?

Aligning a element at the center is not functioning properly when using margin: 0 auto;

Issues with implementing ng-show and ng-disabled functions in AngularJS

Issues with Collision Detection between Canvas Rectangles and Balls

Having issues displaying the & symbol in HTML from backend data

What is the best way to incorporate an exception for the printThis() element?

Ways to position two images in the center

Ways to contrast HTML without considering whitespace?

Is it normal for e.target.result to only work after two or three tries?

What effect does the addition of a border-top have on the position of the left column, causing it

Click a button to adjust the height of an element