Issue with Bootstrap 5 Card Header not extending to full width

I have implemented tables within cards using a CDN.

While the table looks fine in wide widths, it does not resize to fill the entire width when squeezed.

Below is the HTML code:

    <div class="card table-responsive">
        <div class="card-header">
            <i class="fas fa-table me-1"></i>
            DataTable Example
        </div>
        <div class="card-body">
            <table class="table table-hover text-center" id="table_summary">
                <!-- I FILL THIS TABLE USING FLASK/JINJA2 -->
            </table>
        </div>
    </div>

The full table inside the card appears fine.

https://i.sstatic.net/m0z5w.png

The resized table looks good on the left side.

https://i.sstatic.net/iQlyR.png

However, the card header does not expand to the full width when scrolling right.

https://i.sstatic.net/h2JlJ.png

Does anyone have suggestions on making the card header responsive as well?

htmlcssbootstrap-4bootstrap-5

Answer №1

To reposition the table-responsive class, simply remove it from its current placement and insert it next to the card-body class.

<div class="card">
    <div class="card-header">
        <i class="fas fa-table me-1"></i>
        DataTable Example
    </div>
    <div class="card-body table-responsive">
        <table class="table table-hover text-center" id="table_summary">
            <!-- Populate this table using Flask/Jinja2 -->
        </table>
    </div>
</div>

Alternatively, you can place the table-responsive class within a separate div element before the table.

<div class="card">
    <div class="card-header">
        <i class="fas fa-table me-1"></i>
        DataTable Example
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover text-center" id="table_summary">
                <!-- Populate this table using Flask/Jinja2 -->
            </table>
        </div>
    </div>
</div>

For more information, visit: https://getbootstrap.com/docs/4.1/content/tables/#always-responsive

Answer №2

There is no function for scrolling the card header, and nesting the table inside a div.card-body is unnecessary. A more optimized structure could be:

<div class="card">
    <div class="card-header"><i class="fas fa-table me-1"></i> DataTable Example</div>
    <div class="table-responsive">
        <table class="table table-hover text-center" id="table_summary">
            <!-- FILL THIS TABLE USING FLASK/JINJA2 -->
        </table>
    </div>
</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

Selenium extracts valuable content, specifically the text within the <h2> tag of a webpage,

I am currently working on a project that involves entering a postcode (which will eventually be a list) into a website and saving the obtained results to a CSV file using a loop to move on to the next. However, I am encountering difficulties when it comes ...

htmlpython-3.xselenium-webdriver

What is the best way to position a table caption at the top of a table?

I need help setting up a calendar within a table structure, and I'm struggling to add a caption at the top of the table. Unfortunately, I can't modify the current table structure. I want it to resemble the example shown below: https://i.sstatic. ...

htmlcsshtml-tablecalendarcss-tables

Customizing Bootstrap 4 - Utilizing Color-yiq as an Override Variable

How can I customize bootstrap variables while using the color-yiq function? For example: $body-bg: $black; $body-color: color-yiq($body-bg); Here is the SCSS structure I am using: // Overriding variables from all sources @import "variables"; // I ...

twitter-bootstrapsassbootstrap-4theming

Error: Unable to access the 'style' property of null in prac.js at line 3

const heading = document.querySelector("h1"); heading.style.color = "blue"; Encountering an error when attempting to apply color to h1 element using DOM manipulation within a separate JavaScript file. The 2-line code snippet works flawlessly in the consol ...

javascripthtmldom

What is the best location to store and import dependent SCSS files in Angular, Bootstrap 4, and angular-cli projects?

Check out this related question, especially useful if your SCSS code doesn't rely on Bootstrap's variables. In the index.html file: <link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" However, when I t ...

angularangular-clibootstrap-4

Creating a personalized .hasError condition in Angular 4

I am currently in the process of modifying an html form that previously had mandatory fields to now have optional fields. Previously, the validation for these fields used .hasError('required') which would disable the submit button by triggering a ...

javascripthtmlangulardom-events

Ways to create a transparent parallax background

Currently, I'm tasked with developing an educational website using HTML and CSS for a school project. Unfortunately, due to restrictions on code.org, I cannot utilize JavaScript files or script tags. Despite successfully implementing a parallax effect ...

cssbackgroundprojectparallax

Obtain user input from a form and assign it to a variable in a jQuery AJAX

How can I pass the value of an HTML Input Form to a jQuery AJAX call's URL as `amt` in `url: "http://localhost:8080/orderNo?amount=" + amt,`? The input value logs to the console when calling getAmtValue(), but I'm struggling to access the `amt` ...

javascriptjqueryhtmlajax

Tips on showcasing information with ng for in Ionic 2

https://i.sstatic.net/MKIcJ.jpgI am currently working on the thank you page for my project. When the success call is made, it will display both ORDER DETAILS and Delivery Details. However, in the event of a failure call, only the ORDER DETAILS are displaye ...

htmlangularionic2

Having trouble retrieving an object property in HTML or TypeScript within an Angular framework?

export class ComponentOne { array_all_items: Array<{ page_details: any }> = []; array_page_details: Array<{ identifier: number, title: string }> = []; initial_item: Array<{ identifier: number, title: string }> = [ { ...

htmlangulartypescript

Analyzing JSON data and creating a tailor-made array

My Dilemma { "rowId": "1", "product_name": [ "Item A", "Item B", "Item C", "Item D", "Item E" ], "product_tag": [ "123456", "234567", "345678", "456789", "5678 ...

javascripthtmljson

Link inserted in between spaces

Working with Eloqua. Any ideas on what might be causing a space to appear in a link? The space doesn't show up during testing, only in the live version. Here is the code snippet: <p style="line-height:18px;"> <font face="calibri, Arial, H ...

htmlcssfontshyperlinkhtml-email

A guide to mastering the art of descending using three distinct class types

My script is functioning properly for a single class, but it fails to work for multiple classes with the same purpose. I attempted to transfer from div (#panel) to class (.panel) as I am using several classes. However, this adjustment did not resolve the i ...

jqueryhtmlcss

What is the reason that preventDefault fails but return false succeeds in stopping the default behavior

I'm having trouble with my preventDefault code not working as expected. While using return false seems to work fine, I've heard that it's not the best practice. Any ideas why this might be happening? if ($('.signup').length == 0) ...

javascripthtmlajaxjquery

I am not seeing the results I anticipated from my HTML and PHP codes

Currently, I am working on creating a code for a game that involves guessing a random odd number between 1 and 99. My code is as follows- <?php $heading = "Welcome to the guessing game"; $num_to_guess = rand(1,99); if(!isset($_POST['guess']) ...

phphtml

Overlay Image on Card, Overflowing into Card Body

I currently have a webpage featuring cards. Each card includes a thumbnail at the top with an overlay. The main content of the card needs to be positioned outside of the overlay, but it ends up overflowing onto it. Take a look at the demo: https://codepe ...

javascripthtmlcssbootstrap-4

What is the best way to spin an element around its center?

I'm faced with a challenge where I have an element that needs to be rotated using JavaScript. The rotation is currently functional, but it's rotating around points other than its center. My goal is to rotate the element around its own center. ...

javascriptjqueryhtmlcss

CSS unexpectedly adds a border to a div element that does not have any border properties set

Currently, I have a bar with buttons that I refer to as the control bar. My intention is for it to be fixed at the bottom of the screen and span the entire width. However, there seems to be some unwanted white space on the bottom and right edges of the bar ...

htmlcss

Ensure that Colorbox remains centrally positioned even while scrolling

I have noticed a difference in behavior between thickbox and colorbox when it comes to scrolling. Thickbox always stays centered on the screen even when the user scrolls vertically, while colorbox fades out and leaves just a grayed background. Is there a w ...

javascriptcsscolorbox

Confusing Vaadin Component Styling Dilemma

I've been struggling to access the individual parts of elements that require navigating through the shadow DOM. I've been following a guide for assistance: https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes When I add this code ...

javacssvaadinstyling