PrimeNG 表响应式定制答案

【问题标题】：PrimeNG Table Responsive CustomizationPrimeNG 表响应式定制
【发布时间】：2018-04-24 08:57:00
【问题描述】：

PrimeNG 表响应具有堆叠或优先排序的默认外观。是否可以使用其他模板自定义堆叠外观？

提前致谢

【问题讨论】：

其他模板是什么意思？您可以将它与您喜欢的主题一起使用。要添加自定义 CSS 吗？
我想要自定义格式的响应式外观，而不是他们的示例页面中的普通字段和值外观。 primefaces.org/primeng/#/table/responsive

【解决方案1】：

这是可能的。我已经制作了一页。我在断点订阅了一些课程。例如：

@media screen and (max-width: 70em) {
    .mv-text-container{
     white-space: normal !important;
     text-overflow: initial !important;
     overflow: auto !important;
   }

   .ui-table table {
     width: 99%;
   }

  .ui-table-responsive .ui-table-thead > tr > th,
  .ui-table-responsive .ui-table-tfoot > tr > td {
     display: none !important;
  }

  .ui-table-responsive .ui-table-tbody > tr > td {
    text-align: left !important;
    display: block !important;
    border: 0 none !important;
    width: 100% !important;
   -webkit-box-sizing: border-box !important;
   -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    float: left !important;
    clear: left !important;
  }

  .ui-table-responsive .ui-table-tbody > tr > td .ui-column-title {
    padding: .4em !important;
    min-width: 30% !important;
    display: inline-block !important;
    margin: -.4em 1em -.4em -.4em !important;
    font-weight: bold !important;
  }


  tr > td {
    text-align: left !important;
    border: 0px !important;
    padding-left: 15px !important;
  }

  tr > th > {
    border: 0px !important;
    text-align: left !important;
  }

  tr {
   border: 1px solid #D5D5D5 !important;
  }

  tr > td:last-child {
   padding-bottom: 15px !important;
   margin-bottom: 0 !important;
  }

  tr > td:first-child {
   padding-top: 15px !important;
  }
}

但是您必须在 style.css (src/styles.css) 中进行制作，或者，如果您想仅在组件中更改 css，您必须像这样禁用封装：

@Component({
   selector: 'app-flex-novo',
   templateUrl: './flex-novo.component.html',
   styleUrls: ['./flex-novo.component.css'],
   encapsulation: ViewEncapsulation.None
})

【讨论】：