如何将数据表放入具有最大高度百分比的面板中

use*_*325 5 css jsf primefaces

[Primefaces 5.0]

我有一个包含数据表的tabview.根据选项卡,数据表中填充了不同的数据(即不同数量的列和行).以下设置可以很好地处理数据,但无论我将max-height约束放在面板,选项卡还是数据表上,它似乎都不会将其限制在屏幕的百分比范围内.如果我将约束设置为特定值(例如300px),它可以工作,但我宁愿不行.

基本上:我想要一个适合其内容的数据表,直到它占据屏幕的30%.此时,它应该滚动.

    <body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;">
    <div style="width: 10%;float: left"> ... </div>
    <div style="width: 90%;float: right">
            <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;max-height: 30%;margin-bottom: 1%">
                <p:tabView value="#{pageBean.tables}" var="table" dynamic="true">
                    <p:tab title="#{table.tableName}" >
                        <p:dataTable var="row" 
                            value="#{pageBean.tableData[table.tableName].data}" 
                            resizableColumns="true">
                            <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;"
                                var="column" columnIndexVar="columnIndex">
                                <f:facet name="header">
                                    <p:outputLabel value="#{column}"/>
                                </f:facet>
                                <p:outputLabel value="#{row[columnIndex]}"/>
                            </p:columns>
                        </p:dataTable>
                    </p:tab>
                </p:tabView>
            </p:panel>
            ...
    </div>
    </body>
Run Code Online (Sandbox Code Playgroud)

小智 0

您可以将ScrollWidthand用于ScrollHeight数据表。为此目的,有三种选择。例如 :

scrollHeight="30%"
scrollWidth="30%"
scrollable="true"
Run Code Online (Sandbox Code Playgroud)

通过这种方法,您可以控制数据表的大小。

ps:你没有说你的primefaces版本。