Primefaces数据表列宽不起作用

Primefaces数据表列宽不起作用,primefaces,datatable,width,Primefaces,Datatable,Width,我创建了一个包含一些测试数据的datatable。我的问题是,某些值对于我的某个列来说太大,这导致了一个奇怪的布局: (订单列后应显示另外两列) 我已经尝试了一些方法: 无更改 使列变小,但值在30px后被剪切 在几个数字后添加一个以强制生成特征线,但不进行任何更改 订单值是一个大字符串。我的目标是将orders列更改为拆分字符串值的多行列 我的数据表代码: <h:body> <h:head> </h:head> <h:fo

我创建了一个包含一些测试数据的datatable。我的问题是,某些值对于我的某个列来说太大,这导致了一个奇怪的布局:

(订单列后应显示另外两列)

我已经尝试了一些方法:

  • 无更改
  • 使列变小,但值在30px后被剪切
  • 在几个数字后添加一个

    以强制生成特征线,但不进行任何更改
订单值是一个大字符串。我的目标是将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文件和方法应该如何以及在何处创建)。

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

.ui数据表td、.ui数据表th{
空白:正常;
}
如果文本中没有空格,这将不起作用,因为浏览器不知道在哪里换行,在这种情况下,您可以使用wbr标记,但重要的是,IE不支持它

另请参见:


尝试将其添加到datatable
scrollable=“true”
中。它起作用了。

看看我用css方法尝试过,但从未起作用,现在空白:正常;在styleclass属性中使用,效果很好。很高兴知道:)很乐意帮助!