Question

我创建了一个包含一些测试数据的数据表。我的问题是，对于我的一个列，某些值太大，导致一个奇怪的布局：

enter image description here

（在订单栏之后应显示另外两列）

我已经尝试了一些事情：

<p:column headerText="Orders" width="50">无变更
<p:column headerText="Orders" style="max-width: 30px;">使列更加清晰但值在30px
在几个数字之后添加<br/>以强制断开，但没有更改

订单值是一个大字符串。我的目标是将orders列更改为多行列，其中字符串值被拆分。

我的数据表代码：

<h:body>
    <h:head>
    </h:head>
    <h:form id="form">           
        <p:dataTable id="customerTable" var="customer" value="#{customerDataTable.allCustomer}"
         rows="25" paginator="true" emptyMessage="No customer found.">  

                <p:column headerText="Customer ID" style="text-align: center;">  
                <h:outputText value="#{customer.customerNumber}" /> 
                </p:column>

                <p:column headerText="Fist Name" style="text-align: center;">  
                <h:outputText value="#{customer.contactFirstName}" />  
                </p:column> 

                <p:column headerText="Last Name" style="text-align: center;">  
                <h:outputText value="#{customer.contactLastName}" />  
                </p:column> 

                <p:column headerText="Sales Employee Nr." style="text-align: center;">  
                <h:outputText value="#{customer.employee.employeeNumber}" />  
                </p:column> 

                <p:column headerText="Orders">  
                <h:outputText value="#{customer.allOrders}"/>
                </p:column> 


                <p:column headerText="Payments" style="text-align: center;" >
                    <p:commandButton id="payment_btn" update=":form:p_display" oncomplete="paymentDialog.show()" icon="ui-icon-calculator">
                    <f:setPropertyActionListener target="#{customerDataTable.selectedCustomer}" value="#{customer}"/>
                    </p:commandButton>  
                    <p:tooltip for="payment_btn" value="Click to see all payments" showEffect="fade" hideEffect="fade"></p:tooltip>
                </p:column>

                <p:column headerText="Contact Data" style="text-align: center;" >
                    <p:commandButton id="contact_btn" update=":form:c_display" oncomplete="contactDialog.show()" icon="ui-icon-home">
                    <f:setPropertyActionListener target="#{customerDataTable.selectedCustomer}" value="#{customer}"/>
                    </p:commandButton>  
                    <p:tooltip for="contact_btn" value="Click to see the detailed contact data" showEffect="fade" hideEffect="fade"></p:tooltip>
                </p:column>

        </p:dataTable>
    </h:form>    
    </h:body>

在其他线程中，我发现使用css的解决方案但是也没有用（原因可能是我现在不知道应该如何创建css文件和方法）。

Answer 1

如果您希望行中断，可以使用CSS。尝试将此添加到您的样式

.ui-datatable td,.ui-datatable th {
    white-space: normal;
}

如果文本中没有空格，这将无效，因为浏览器不知道在哪里断线，在这种情况下，您可以使用 wbr 标记，但重要的是要说它不受IE支持

另见：

http://www.w3schools.com/tags/tag_wbr.asp

Answer 2

尝试将此添加到数据表scrollable="true"中。

Primefaces数据表列宽不起作用

2 个答案: