使用div动态显示第一列，其余全部通过水平滚动条显示

Question

我需要你的帮助。

我正在创建具有动态列的N级嵌套表

所以我想做的是，我想根据用户选择创建一个具有可变列数的表，为此我创建了一个简单的下拉框，根据下拉选择，这些选定的列将出现在表格中

我想要的是表格的第一列应始终固定，而其他列可以水平滚动，并且这些列的宽度应根据列的显示或隐藏进行调整

我不想使用任何外部库。我已经基于div和网格CSS

创建了一个自定义表

下面是我到目前为止所做的事情的屏幕截图

以下是参考代码：

HTML：

<ng-container *ngFor="let rData of reportData; let i = index; last as isLast" >
  <div class="myTr report-row">
    <div class="myTd">
        <button 
           class="btn report-btn-sm" 
           *ngIf="checkIfHaveMoreSplits(this.splitOpt[0].id) !== 0 && rData.isCollapsed == true"
           (click)="splitData(rowWiseFilterObj(rData,this.splitOpt[0].id),this.splitOpt[0].id,sFilters,splitOpt,i,rData,selectedDate)"
           row="rData">+</button>
        <button 
           class="btn report-btn-sm" 
           *ngIf="checkIfHaveMoreSplits(this.splitOpt[0].id) !== 0 && rData.isCollapsed == false" 
           (click)="removeDynamicComponent(rData,i)"
           >-</button>
           <span *ngIf="this.splitOpt[0].id == 'campid'">{{rData['campaign_name']}}</span>

          <span *ngIf="this.splitOpt[0].id !== '__time' && this.splitOpt[0].id !== 'campid'">{{rData[this.splitOpt[0].id]}}</span>
          <span *ngIf="this.splitOpt[0].id === '__time'">{{ rData[this.splitOpt[0].id]  | date:'dd-MM-yyyy HH:mm:ss Z'}}</span>


    </div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd">{{convertToDecimals(rData.impressions,2)}}</div>
      <div class="myTd">{{convertToDecimals(rData.conversions,2)}}</div>
      <div class="myTd">{{convertToDecimals(rData.bids,2)}}</div>
      <div class="myTd">{{convertToDecimals(rData.wins,2)}}</div>
      <div class="myTd">$ {{convertToDecimals(rData.spend,2)}}</div>
      <div class="myTd">
        <button class="btn btn-secondary m-btn m-btn--label-danger m-btn--label-danger m-btn--bolder m-btn--uppercase btn-sm" *ngIf="this.splitOpt[0].id=='campid'" (click)="excludeReport(rowWiseFilterObj(rData,this.splitOpt[0].id))"> <i class="la la-close"></i> </button>
        <button class="btn btn-secondary m-btn m-btn--label-danger m-btn--bolder m-btn--uppercase btn-sm" disabled="disabled" *ngIf="this.splitOpt[0].id!='campid'"> <i class="la la-ban"></i> </button>

      </div>
    </div></div>
  </div>

  <div *ngIf="isLast" class="text-right col-12">{{altrows("#ffffff","#f5f5f5")}}

            <a href="javascript:void(0)" class="m-link" (click)="loadmore()" style="    margin: 10px -30px 15px 10px;
    background: #5ccdde;
    color: #fff;
    padding: 2px 10px;
    font-size: 12px;" *ngIf="reportData.length > 19"> Load more </a>
        </div>
    <ng-template #dynamic ></ng-template>

    </ng-container>
  <div class="myTr" style="margin-top:20px;">
    <div class="myTd"></div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd"></div>
    </div></div>
  </div>
</div>

JS：

getReport() {
        this.hidePopup();
        if(this.splitOpt.length === 0) {
            // this.updateGraph(this.currentGraphSelection);
            return false;
        } 


        var apiFilters: any = [{}];
        for (var i = 0; i < this.sFilters.length; i++) {
            if (this.sFilters[i].values.length > 0) {
                var k;
                k = this.sFilters[i].id
                apiFilters[0][k] = this.sFilters[i].values
            }
        }

        var split = this.splitOpt[0].id;
        this.reportData=[];
        this.reportLoading = true;
        this._apis.getReportData(split, apiFilters[0],this.selectedDate,1,20).subscribe(response => {
            if (response.status == 1200) {
                this.reportData = response.data.split_by_data;
                this.reportData.map(function(obj) {
                  obj.isCollapsed = true;
                  return obj;
               });
            this.totalImpressions=response.data.totalCount[0].impressions;
            this.totalConversions=response.data.totalCount[0].conversions;
            this.totalBids=response.data.totalCount[0].bids;
            this.totalWins=response.data.totalCount[0].wins;
            this.totalSpend=response.data.totalCount[0].spend;
               this.reportLoading = false;
               var contentGroups = document.querySelectorAll('.myTr:not(:last-child) .myTdGroupBox');
var ctrlGroup = document.querySelector('.myTr:last-child .myTdGroupBox');
ctrlGroup.addEventListener('scroll', (ev)=> {
    contentGroups.forEach((g)=> g.scrollTo(ctrlGroup.scrollLeft, 0) );
});
               this.cd.detectChanges();

            }
        });
    }

Answer 1

您可以使用<div> s进行弹性布局来重新制作表格。

我在下面写一个完整的例子。您没有表格的所有灵活性，但是它非常强大。您还可以将列滚动器固定到页面上，甚至在表大于页面高度的情况下也可以看到。还有更多...

您会看到，我将所有可滚动的列都设置为相同的宽度。您可以设置不同的宽度。我会使用列的类来做到这一点。

我相信代码很容易理解。如果您需要帮助，或者想使用更多Flex布局功能，可以查看以下页面：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使所有事物一起运动的javascript是这里最简单的事情。这个想法是获取滚动事件并在与overflow: hidden相同的行上应用相同的滚动。

要创建新列，就像在<table>上创建列一样简单，只需将<div> s放入.myTdGroup元素中即可。

<style>
  .myTable {
    font-family: sans-serif;
    font-size: 15px;
    width: 450px;
    border: 2px solid #BBB;
    position: relative;
  }
  .myTr {
    display: flex;
    align-items: center;
  }
  .myTr:nth-child(odd) { background: #DDD }
  .myTdGroupBox {
    overflow: hidden;
  }
  .myTdGroup {
    display: flex;
    align-items: center;
    width: 500px;
  }
  .myTr:last-child { background: #777 }
  .myTr:last-child .myTdGroupBox { overflow-x: scroll }
  .myTr:last-child .myTd { padding: .1px 0 0 0 }
  .myTd {
    margin: 0 1em;
    padding: .5em 0;
    flex-grow: 1;
    flex-basis: 50px;
    overflow-x: auto;
    white-space: nowrap;
  }
  .myTr > .myTd { flex-basis: 150px; }
</style>

<div class="myTable">
  <div class="myTr">
    <div class="myTd">Line A</div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd">A1</div>
      <div class="myTd">A222</div>
      <div class="myTd">A333</div>
      <div class="myTd">A444</div>
      <div class="myTd">A555</div>
      <div class="myTd">A666</div>
    </div></div>
  </div>
  <div class="myTr">
    <div class="myTd">Line BBBBB</div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd">B111</div>
      <div class="myTd">B2</div>
      <div class="myTd">B333</div>
      <div class="myTd">BX<br>444</div>
      <div class="myTd">B555</div>
      <div class="myTd">B666</div>
    </div></div>
  </div>
  <div class="myTr">
    <div class="myTd">Line<br>CCC<br>CCC</div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd">C111</div>
      <div class="myTd">C222</div>
      <div class="myTd">C3</div>
      <div class="myTd">C 444 444 444 end</div>
      <div class="myTd">C555</div>
      <div class="myTd">C666</div>
    </div></div>
  </div>
  <div class="myTr">
    <div class="myTd">Line DDD</div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd">D111</div>
      <div class="myTd">D222</div>
      <div class="myTd">D333</div>
      <div class="myTd">D444</div>
      <div class="myTd">D555</div>
      <div class="myTd">D666</div>
    </div></div>
  </div>
  <div class="myTr">
    <div class="myTd"></div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd"></div>
    </div></div>
  </div>
</div>

<script>
var contentGroups = document.querySelectorAll('.myTr:not(:last-child) .myTdGroupBox');
var ctrlGroup = document.querySelector('.myTr:last-child .myTdGroupBox');
ctrlGroup.addEventListener('scroll', (ev)=> {
    contentGroups.forEach((g)=> g.scrollTo(ctrlGroup.scrollLeft, 0) );
});
</script>

Answer 2

Janak Prajapati，我之前做过一些类似于固定桌子的事情。

https://jsfiddle.net/Sampath_Madhuranga/2o4h6u3f/10/

  

.tg {
     border-collapse:collapse;
     border-spacing:0;
     border-color:#ccc;
}
 .tg td{
     font-family:Arial, sans-serif;
     font-size:14px;
     padding:9px 20px;
     border-style:solid;
     border-width:1px;
     overflow:hidden;
     word-break:normal;
     border-color:#ccc;
     color:#333;
     background-color:#fff;
}
 .tg th{
     font-family:Arial, sans-serif;
     font-size:14px;
     font-weight:normal;
     padding:9px 20px;
     border-style:solid;
     border-width:1px;
     overflow:hidden;
     word-break:normal;
     border-color:#ccc;
     color:#333;
     background-color:#f0f0f0;
}
 .tg .tg-29qf{
     font-weight:bold;
     background-color:#f0f0f0;
     border-color:inherit;
     text-align:left
}
 .tg .tg-xldj{
     border-color:inherit;
     text-align:left
}
 .tg .sticky-col-1{
     left: 0;
     position: absolute;
     top: auto;
     width: 120px;
}
 .tg .sticky-col-2{
     left: 160px;
     position: absolute;
     top: auto;
     width: 70px;
}
 .zui-scroller {
     margin-left: 295px;
     overflow-x: scroll;
     overflow-y: visible;
     padding-bottom: 5px;
     width: 900px;
}
 .tg .tg-kiyi{
     font-weight:bold;
     border-color:inherit;
     text-align:left;
     min-width:100px;
}
 .tg .cover-head-cell{
     min-width:300px;
     text-align:center;
}
 .tg .tg-29qf{
     font-weight:bold;
     background-color:#f0f0f0;
     border-color:inherit;
     text-align:left;
     min-width:100px;
}
 .tg .tg-xldj{
     border-color:inherit;
     text-align:left;
     min-width:100px;
}
 .tg .tg-dvid{
     font-weight:bold;
     background-color:#efefef;
     border-color:inherit;
     text-align:left;
     vertical-align:top;
     min-width:100px;
}
 @media screen and (max-width: 767px) {
    .tg {
        width: auto !important;
    }
    .tg col {
        width: auto !important;
    }
    .tg-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

   

 <div class="tg-wrap">
       <div class="zui-scroller">
          <table class="tg">
             <thead>
                <tr>
                   <th class="tg-kiyi sticky-col-1" rowspan="2">Title 1</th>
                   <th class="tg-kiyi sticky-col-2" rowspan="2">Title 2</th>
                   <th class="tg-kiyi cover-head-cell" colspan="3">Title 3</th>
                   <th class="tg-kiyi" rowspan="2">Title 4</th>
                   <th class="tg-kiyi cover-head-cell" colspan="3">Title 5</th>
                   <th class="tg-kiyi" rowspan="2">Title 6</th>
                   <th class="tg-kiyi cover-head-cell" colspan="3">Title 7</th>
                   <th class="tg-kiyi" rowspan="2">Title 8</th>
                </tr>
                <tr>
                   <th class="tg-kiyi sticky-col-1" rowspan="2">Subtitle 1</th>
                   <th class="tg-kiyi sticky-col-2" rowspan="2">Subtitle 2</th>
                   <th class="tg-29qf">Subtitle 3</th>
                   <th class="tg-29qf">Subtitle 4</th>
                   <th class="tg-29qf">Subtitle 5</th>
                   <th class="tg-29qf">Subtitle 6</th>
                   <th class="tg-29qf">Subtitle 7</th>
                   <th class="tg-29qf">Subtitle 8</th>
                   <th class="tg-29qf">Subtitle 9</th>
                   <th class="tg-29qf">Subtitle 10</th>
                   <th class="tg-29qf">Subtitle 11</th>
                </tr>
             </thead>
             <tr>
                <td class="tg-xldj sticky-col-1">sdz</td>
                <td class="tg-xldj sticky-col-2">saz</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">sa</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
             </tr>
             <tr>
                <td class="tg-xldj sticky-col-1">as</td>
                <td class="tg-xldj sticky-col-2">sa</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">sa</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">as</td>
                <td class="tg-xldj">sa</td>
             </tr>
             <tr>
                <td class="tg-dvid sticky-col-1">Total</td>
                <td class="tg-dvid sticky-col-2">23</td>
                <td class="tg-dvid">sd</td>
                <td class="tg-dvid">ds</td>
                <td class="tg-dvid">sd</td>
                <td class="tg-dvid">sd</td>
                <td class="tg-dvid">ds</td>
                <td class="tg-dvid">dd</td>
                <td class="tg-dvid">sd</td>
                <td class="tg-dvid">ds</td>
                <td class="tg-dvid">sd</td>
                <td class="tg-dvid">ds</td>
                <td class="tg-dvid">dd</td>
                <td class="tg-dvid">sd</td>
             </tr>
          </table>
       </div>
    </div> 

请尝试此操作，让我知道您的想法。 谢谢。