PrimeNG p- 데이터 테이블 응답 중단 점

Question

내 평균 응용 프로그램에 PrimeNG 4.2.0을 사용할 예정입니다. 코드는 다음과 같습니다 : DataTable에의 대응에 대한 중단 점을 설정하는 방법은

<div class="ui-g-12" *ngIf="orders"> 
    <p-dataTable 
    [value]="orders" 
    [responsive]="true" 
    selectionMode="single" 
    [(selection)]="selectedOrder" 
    (onRowDblclick)="onRowSelect($event)" 
    styleClass="ordersTable" 
    > 
    <p-column header="Date" [style]="{'width':'15%'}"> 
     <ng-template let-col let-order="rowData" pTemplate='body'> 
     <span>{{order.orderDate | date:'shortDate'}}</span> 
     </ng-template> 
    </p-column> 
    <p-column field="orderNumber" header="ID" [style]="{'width':'15%'}" [filter]="true"></p-column> 
    <p-column field="userId" header="Client ID" [style]="{'width':'20%'}"></p-column> 
    <p-column header="No. of Products" [style]="{'width':'12%'}"> 
     <ng-template pTemplate="body" let-col let-order="rowData"> 
     <span>{{order.orderDetails.length}}</span> 
     </ng-template> 
    </p-column> 
    ... 
    <p-footer *ngIf="orders"> 
     Total orders: {{orders.length}} 
    </p-footer> 
    </p-dataTable> 
</div> <!--Orders DATA Ends--> 

있습니까? 현재 너비 : 667 (iPhone 6 가로 모드) 결과는 끔찍합니다.

Answer 1

몇 분 후에 Chrome Dev Tools의 Elements 태그를 사용하여 문제를 해결할 수있었습니다.

@media 쿼리가 제공하는 tbody> tr> td 행의 측면에 PrimeNG 데이터 가능 응답이 구현됩니다. 응답 속도가 mypreferred 화면 크기 (말에 따라 중단 점 변경)에 표시되도록하려면 루트 루트 styles.css에 추가해야합니다.

@media (max-width: 1365px) /* I want the datatable to be stacked at at least iPad Pro portrait mode, this depends on your data */ 
{ 
    /* Data in responsive mode */ 
    .ui-datatable-reflow .ui-datatable-data > tr > td { 
     width: 100% !important; 
     text-align: left; 
     border: 0; 
     box-sizing: border-box; 
     float: left; 
     clear: left; 
    } 


    .ui-datatable-reflow .ui-datatable-data tr.ui-widget-content { 
     border-left: 0; 
     border-right: 0; 
    } 

    .ui-datatable-reflow .ui-datatable-data.ui-widget-content { 
     border: 0; 
    } 

    /*Hide the headers in responsive mode*/ 
    .ui-datatable-reflow thead th { 
     display: none !important; 
    } 

    /*Display the headers inline with the data in responsive mode */ 
    .ui-datatable-reflow .ui-datatable-data td .ui-column-title { 
     padding: .4em; 
     min-width: 30%; 
     display: inline-block; 
     margin: -.4em 1em -.4em -.4em; 
     font-weight: bold; 
    } 
}