htmlbootstrap-4

Why is my Bootstrap table overflowing the containing card?

Actually i'm trying to set a table inside a bootstrap card, the issue is that the table width goes out off that card and i would to prevent it. The table is made for each tr of one th and 96 td.

enter image description here

I was trying to set the table width to 100% and set to each td 1% of width but i didn't worked

enter image description here

Here is the table code:

 <div class="col-md-8">
                        <div class="card p-2">
                            <div class="card-body text-center" >
                                <div class="table-responsive">
                                <table class="table table-hover">
                                    <tbody>
                                          <asp:PlaceHolder ID="placeholder" runat="server"></asp:PlaceHolder>
                                    </tbody>
                                </table>
                                    </div>
                            </div>
                        </div>
                    </div>
Solution

  • The issue is the padding that Bootstrap applies. It results in each cell having a minimum width of 24px.

    .table.no-cellpadding td {
  padding: 0;
}

    Demo