响应式表不填充它嵌套的整个列

Posted 2023-03-07

【中文标题】响应式表不填充它嵌套的整个列

【英文标题】：Responsive-table does not fill the whole col in which it is nested

【发布时间】：2019-06-04 15:31:51

【问题描述】：

我在 Angular 应用中使用 bootstrap 4。

在一个组件的 html 中，我试图在网格行中嵌套一个响应式表格。

我按照说明将“table”div 嵌套在另一个“table-responsive”类的 div 中，但该表仍然没有填充它嵌套的 col。

这是我的网格代码：

<div class="container-fluid">
    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        <h5  ng-app ng-controller="GetDate">
        date | date : 'dd.MM.yyyy'
        </h5>
      </div>
    </div>

    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        "Welcome "+ Name
        </div>
    </div>

    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        <button type="button" class=" btn btn-dark" data-toggle="modal" data-target="#modalMonthSelect">Launch Calculation</button>
      </div>
    </div>
    <div class="row">
      <div class="col-4"></div>
      <div class="col-4">
      <div class="table-responsive" >
      <div class="table table-striped table-bordered" >
        <thead>
          <tr>
            <th>Eitan</th>
            <th>Pozen</th>
            <th>Rebbi</th>
            <th>Cohen</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>500</td>
            <td>1000</td>
            <td>1500</td>
            <td>2000</td>
          </tr>
          <tr>
            <td>500</td>
            <td>1000</td>
            <td>1500</td>
            <td>2000</td>
          </tr>
        </tbody>
    </div>
  </div>
      </div>
      <div class="col-4"></div>

    </div>

</div>

这是一个截图：

如您所见 - 尽管表格嵌套在“col-4”内，但它并没有填充它。 我应该怎么做才能使表格伸展并填满整个col？

【参考方案1】：

在您的代码中，“table table-striped table-border”类的 [div] 标签必须是 [table]

<div class="table-responsive" >
    <table class="table table-striped table-bordered" >
        ...
    </table>
</div>

试试看，让我知道。

https://hackerthemes.com/bootstrap-cheatsheet/#table-responsive

使用上面的链接作为参考。我觉得很方便。