PrimeNg p-table 响应显示：网格不工作答案

【问题标题】：PrimeNg p-table responsive with display:grid not workingPrimeNg p-table 响应显示：网格不工作
【发布时间】：2022-01-04 14:18:26
【问题描述】：

我有一个 div，其中包含另外两个带有“display:grid”的 div。在第二个 div 中，我有一个primeng p-table，如下所示：

<div style="display: grid; grid-template-columns: 200px auto;">
  <div>sidebar</div>
  <div class="card">
    <p-table #table responsiveLayout="scroll" [value]="products">
      <ng-template pTemplate="caption"> Scroll </ng-template>
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th>Name</th>
          <th>Price</th>
          <th>Category</th>
          <th>Quantity</th>
          <th>Status</th>
          <th>Reviews</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-product let-columns="columns">
        <tr>
          <td>{{ product.name }}</td>
          <td>{{ product.price | currency: 'USD' }}</td>
          <td>{{ product.category }}</td>
          <td>{{ product.quantity }}</td>
          <td>
            {{ product.inventoryStatus }}
          </td>
          <td>
            Rating
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

查看stackblitz上的工作示例

当我删除 display:grid p-table 时，如果内容太宽，它会正确显示其内容的滚动条。但是，使用 display:grid 滚动条出现在整个页面上。我报告了一个错误，但它说需要几个星期才能得到回复。它适用于'显示：网格;网格模板列：200px 200px;'但我希望表格占据所有可用宽度。

有人知道解决方法吗？也许是css？

PS：display:flex 也会发生这种情况

【问题讨论】：

标签： css angular primeng

【解决方案1】：

它似乎无法将百分比作为宽度处理（宽度：100%）。一个可行的解决方案是计算网格模板中的宽度，如下所示：

<div style="display: grid; grid-template-columns: 200px calc(100% - 200px);">

也许这对某人有帮助。

【讨论】：