为什么我的 Bootstrap 表会溢出包含卡？答案

【问题标题】：Why is my Bootstrap table overflowing the containing card?为什么我的 Bootstrap 表会溢出包含卡？
【发布时间】：2019-03-23 00:38:21
【问题描述】：

实际上，我正在尝试在引导卡内设置一个表格，问题是表格宽度超出了该卡的范围，我会阻止它。该表是为每一个 tr 和 96 td 制作的。

我试图将表格宽度设置为 100%，并将每个 td 设置为宽度的 1%，但我没有工作

这是表格代码：

 <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 不关心后者，在这种情况下我们也不关心。
@isherwood jsfiddle.net/mgaryh1p 在小提琴中显示得很好，我发现如果我从表格标签中取消“表格”类，表格将完全适合卡片，原因是我打算在那张桌子上做一个“时间表”

标签： html bootstrap-4

【解决方案1】：

问题在于 Bootstrap 应用的填充。它导致每个单元格的最小宽度为 24px。

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

Demo

【讨论】：

太棒了-我将padding: 0 添加到card-body 类中并且它起作用了。但是为什么table-responsive 不按比例减少填充？
您必须询问 Bootstrap 开发人员。我的猜测是，他们不想在如此广泛的情况下使用的东西手忙脚乱。

【解决方案2】：

你是否用 tr 包裹每组 td 标签？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>

    <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>
                            <tr class="class">

                            </tr>
                            <tr class="class">

                            </tr>
                            <tr class="class">

                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        window.onload = () => {
            let allTrs = document.querySelectorAll('tr.class');

            allTrs.forEach((tr) => {
                for (let i = 0; i < 96; i++) {
                    const newTd = document.createElement('td');
                    newTd.style = "width: 1%";
                    newTd.appendChild(document.createTextNode('value'))
                    tr.appendChild(newTd)
                }
            })
        }

    </script>


</body>

</html>

这符合您的需要吗？

【讨论】：

是的，我愿意，每一行都按以下方式制作：“ ...x96
尝试使用这个： 33
其实我需要这 96 个所以我必须使用它们
如果您想要 96 行，请对每一行使用类似的内容。这是两行： Hello Hello
我不需要 96 行，但需要其中的列。正如您在屏幕上看到的，一切正常，但只是桌子没牌了