Question

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

我试图将表的宽度设置为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>

Answer 1

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

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

Demo

Answer 2

您是否在每套td标签上加上tr？

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

这符合您的需求吗？

为什么我的Bootstrap表溢出了存储卡？

2 个答案: