为什么我的Bootstrap表溢出了存储卡? [英] Why is my Bootstrap table overflowing the containing card?

问题描述

实际上，我正在尝试在引导卡内设置一张桌子，问题是该桌子的宽度超出了该卡的范围，我会阻止它. 该表格是针对每1天和96吨的tr制作的.

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.

我试图将表格宽度设置为100％，并将每个td设置为宽度的1％，但是我没有用

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

这是表格代码:

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

推荐答案

问题是Bootstrap应用的填充.这样，每个单元格的最小宽度为24px.

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

这篇关于为什么我的Bootstrap表溢出了存储卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！