Bootstrap - 卡内的桌子不适合答案

【问题标题】：Bootstrap - table inside card does not fitBootstrap - 卡内的桌子不适合
【发布时间】：2021-04-29 04:34:50
【问题描述】：

我想在卡片内有一个引导表，但它不适合它。

代码如下：

   <div class="card-columns d-flex justify-content-center mt-3">
    <div class="card" *ngFor="let test of tests">
        <div class="card-header">
            <strong>
                test
            </strong>
        </div>
        <div class="card-body" *ngFor="let rule of test.rules; let i = index">
            <table class="table table-striped text-center">
                <thead>
                <tr>
                    <td>
                        <strong>IDs</strong>
                        <button type="button" class="no-border btn-link-clear">
                            <i class="fa fa-change "></i>
                        </button>
                    </td>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let id of rule.ids">
                    <td >
                        {{ id }}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

有什么建议吗？

【问题讨论】：

可以把组件的css贴一下吗？

标签： html angular twitter-bootstrap

【解决方案1】：

 <div class="card-columns d-flex justify-content-center mt-3">
    <div class="card" *ngFor="let test of tests">
        <div class="card-header">
            <strong>
                test
            </strong>
        </div>
        <div class="card-body" *ngFor="let rule of test.rules; let i = index">
            <table class="card-table table">
    <thead>
      <tr>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">ID</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mark</td>
        <td>Otto</td>
        <td>2222.2.2.9822.2.2.2.2.787po4878957iowr2.2.2.2.2.2.22222222.2.2.</td>
      </tr>
      <tr>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>2222.248573945.2.22.2.2.2.2.2.2.2.2.2.2.2.2.2.22222222.2.2.</td>
      </tr>
      <tr>
        <td colspan="2">Larry</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
        </div>
    </div>
</div>

I have also add a snap of the output. Hope this is helpful

【讨论】：

【解决方案2】：

<div class="card-body overflow-auto" *ngFor="let rule of test.rules; let i = index">

overflow-auto 此处防止内容溢出到容器元素之外。同样可以通过将样式overflow: auto; 添加到容器元素来实现。

【讨论】：

社区鼓励在代码中添加解释，而不是纯粹基于代码的答案（参见here）。