CODEWITHSUNDEEP
htmlcssbootstrap-4bootstrap-5
Matheus Torquato
Matheus Torquato

Reputation: 1629

Bootstrap 5 Card Header not filling full width

I'm using tables insides cards (CDN - [email protected]).

The table looks ok in wide widths, but when it is squeezed the card header does not resize to fill the entire width.

This is the HTML.

    <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 in the card looking OK

![enter image description here

Resized Table looking ok on the left part

enter image description here

Card Header not filling the entire width when you scroll right.

enter image description here

Any idea how to make this card header responsive as well?

Upvotes: 0

Views: 2091

Answers (2)

Samuel Silas
Samuel Silas

Reputation: 319

Just remove the table-responsive class from where you have put it and insert it next to class card-body

<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">
            <!-- I FILL THIS TABLE USING FLASK/JINJA2 -->
        </table>
    </div>
</div>

Or you can put the table-responsive class on it's own div element before element table as follows

<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">
            <!-- I FILL THIS TABLE USING FLASK/JINJA2 -->
        </table>
    </div>
</div>

reference from https://getbootstrap.com/docs/4.1/content/tables/#always-responsive

Upvotes: 2

Cas Dekkers
Cas Dekkers

Reputation: 372

Scrolling the card header has no function. Also, there is no need for nesting the table inside a div.card-body. You could try:

<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>

Upvotes: 1

Related Questions