在桌面浏览器

Question

primefaces 5.2

我有一个primefaces数据表，表很长，这就是为什么我想在列堆叠模式下显示它，我尝试使用数据表的reflow属性。

现在，如果我在chrome中使用开发人员模式并切换到移动视图，当我减小屏幕大小时，它确实表现出响应并进入堆叠列模式，现在我想在普通桌面中显示该类型的表查看。我认为简单的事情，比如减小桌子的大小会有所帮助，但无论我减小尺寸多小，它都会把桌子放到那个小空间而不是让它响应。

我错过了一些关于如何在桌面浏览器上做出响应的行为。

<p:dataTable id="tb1" var="ths" value="#{thb.sitetracking}"
            rowIndexVar="rowindex"  reflow="true" 
            >

在正常大小下，表格如下所示

在Chrome开发者模式移动视图中

如果我调整表格大小以获得相同的效果，而不是响应大小更改，则会发生这种情况

<p:dataTable id="tb1" var="ths" value="#{thb.sitetracking}"
            rowIndexVar="rowindex"  reflow="true"  style="width:200px"
            >

如果我使用上面的相同表调整我的浏览器并将其缩小，则可以正常工作

也许我只是不理解响应实际意味着什么，是不是可以通过改变表的大小来触发响应行为，它似乎只在浏览器的大小改变时起作用

我这样做的主要目的并不是要让桌子响应我想要实现的真实事情就是让桌子进入列堆叠模式而且从我所看到的这是唯一的PF做的方式

任何帮助将不胜感激

Answer 1

重排模式适用于CSS媒体查询。当窗口宽度小于35em时（另请参阅下面的primefaces.css片段），则应用回流模式。

因此，不会考虑将width: 200px;应用于dataTable，也不会产生堆叠的数据表。

为了实现你的目标（当你的窗口宽度大于35em时应用堆栈模式）你可以创建（我无法找到一个更干净的解决方案）你自己的css类，它摆脱了媒体查询。像 table-reflow-desktop ：

之类的东西

.table-reflow-desktop .ui-datatable-data td .ui-column-title {
      display: none;
}
.table-reflow-desktop thead th,
.table-reflow-desktop tfoot td {
      display: none;
}
.table-reflow-desktop .ui-datatable-data td {
     text-align: left;
     display: block;
     border: 0px none;
     width: 100%;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     float: left;
     clear: left;
}
.table-reflow-desktop .ui-datatable-data.ui-widget-content {
     border: 0px none;
}
.table-reflow-desktop .ui-datatable-data tr.ui-widget-content {
     border-left: 0px none;
     border-right: 0px none;
}
.table-reflow-desktop .ui-datatable-data td .ui-column-title {
     padding: .4em;
     min-width: 30%;
     display: inline-block;
     margin: -.4em 1em -.4em -.4em;
}

不要忘记将此课程应用于p:dataTable：

<p:dataTable id="tb1" var="ths" value="#{thb.sitetracking}" rowIndexVar="rowindex" styleClass="table-reflow-desktop">

作为参考，这里是负责回流模式的原始PrimeFaces 5.2 css部分：

/** Reflow **/
.ui-datatable-reflow .ui-datatable-data td .ui-column-title {
   display: none;
}
@media ( max-width: 35em) {
    .ui-datatable-reflow thead th,
    .ui-datatable-reflow tfoot td {
        display: none;
    }
    .ui-datatable-reflow .ui-datatable-data td {
        text-align: left;
        display: block;
        border: 0px none;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
    .ui-datatable-reflow .ui-datatable-data.ui-widget-content {
        border: 0px none;
    }
    .ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
        border-left: 0px none;
        border-right: 0px none;
    }
    .ui-datatable-reflow .ui-datatable-data td .ui-column-title {
        padding: .4em;
        min-width: 30%;
        display: inline-block;
        margin: -.4em 1em -.4em -.4em;
    }
}