如何使用角度和离子制作带有固定标题的可滚动表格

Posted 2023-03-06

【中文标题】如何使用角度和离子制作带有固定标题的可滚动表格

【英文标题】：How to make a scrollable table with fixed header using angular and ionic

【发布时间】：2020-03-13 19:47:22

【问题描述】：

我正在尝试使用离子网格创建一个带有固定标题的可滚动表格水平和垂直滚动条。

我能够实现滚动部分，但无法修复标题。

html：

    <ion-content class="selectedTheme inventory-content">
      <div class="selectedTheme reports-table">
        <ion-grid>
          <ion-row nowrap class="headers">
            <ion-col size="5" class="single-border">
              Name
            </ion-col>
            <ion-col size="2" class="single-border">
              Model
            </ion-col>
            <ion-col size="3" class="single-border">
              Make
            </ion-col>
            <ion-col size="3" class="single-border">
              Year
            </ion-col>
          </ion-row>

          <ion-row nowrap class="content" *ngFor="let inventory of sortedInventoryList">
            <ion-col size="5">  inventory.Name  </ion-col>
            <ion-col size="2">  inventory.Model  </ion-col>
            <ion-col size="3">  inventory.Make  </ion-col>
            <ion-col size="3">  inventory.Year  </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </ion-content>

CSS：

    .reports-table 
      overflow-x: auto;
    

    .inventory-content 
      background-color: #f0f1f2;
    

    .headers 
      color: #454f63;
      font-family: "Open Sans";
      font-weight: bold;
      font-size: 14px;
      margin-top: 10px;
      word-wrap: break-word;
    

    .border,
    .single-border 
      border-bottom: 2px solid #989898;

    

    .single-border 
      padding-top: 12px;

    

    .content 
      color: #454f63;
      font-family: "Open Sans";
      font-size: 10px;
    

【问题讨论】：

你可以试试这个：v7.material.angular.io/components/table

谢谢@H3llrais3R :)... 但要求是我们只需要使用 ion-grid 来实现它。

【参考方案1】：

已经很晚了..但它用于其他人..下面的代码对我来说很好 将你的herader css更改为

 .headers 
          color: #454f63;
          font-family: "Open Sans";
          font-weight: bold;
          font-size: 14px;
          margin-top: 10px;
          word-wrap: break-word;
          background-color: #f0f1f2;;
    
        // Fixed Header
          position: sticky;
          top: 0;
          left: 0;
          right: 0;
          z-index: 9999;