DataTable在primefaces 6.0中无法正常工作

Question

When I click on any of the input box ( resource, phone and email) for filter it's filter data but format is not coming properly(please click on this link to see the screen shot)

It's coming in this format.(please click on this link to see the screen shot)

<p:dataTable id="teamList"  
             var="element" value="#{manager.resourcesTeam}" editable="true"
             style="overflow:scroll; overflow-x: hidden; height:195px"> 
    <p:ajax event="rowEdit" update="@this" />
    <!--  Resource Name -->
    <p:column headerText="#{crud['escalation.matrix.elements.resource']}" 
              filterBy="#{element.name}" 
              filterMatchMode="contains"
              filterStyle="border: 1px solid lightGrey"
              sortBy="#{element.name}"
              style="width:280px; background-image:none;">                      
        <h:outputText id="resourceName" 
                      value="#{nsn:substring(element.name, 35)}"
                      title="#{element.name.length() > 35 ? element.name : ''}"
                      style="#{element.name.length() > 35 ? 'cursor: help;' : ''}" />
       <p:tooltip for="resourceName" 
                   style="z-index:9999 !important;"> 
            <h:panelGrid>
                <h:outputText value="#{crud['team.integration.keys']}" style="font-weight:bold" />
                <h:panelGroup>
                    <h:outputText value="#{crud['team.tam.username']}: " style="font-weight:bold"/>
                    <h:outputText value="" />
                </h:panelGroup>
                <h:panelGroup>
                    <h:outputText value="#{crud['team.ipm.username']}: " style="font-weight:bold"/>
                    <h:outputText value="" />
                </h:panelGroup>
                <h:panelGroup>
                    <h:outputText value="#{crud['team.nols.username']}: " style="font-weight:bold"/>
                    <h:outputText value="" />
                </h:panelGroup>
            </h:panelGrid>
         </p:tooltip> 
    </p:column> 

    <!--  Resource phone number -->
    <p:column headerText="#{crud['escalation.matrix.elements.phone']}"  
              filterBy="#{manager.engineerPhone(element)}" 
              filterStyle="border: 1px solid lightGrey"
              filterMatchMode="contains"
              style="width: 125px; background-image: none; text-align: center;">                        
        <h:outputText value="#{manager.engineerPhone(element) != 0 ? manager.engineerPhone(element) : ''}"/>
    </p:column> 

    <!--  Resource E-mail -->
    <p:column headerText="#{crud['escalation.matrix.elements.useEmail']}" 
              filterBy="#{element.email}" 
              filterMatchMode="contains"
              filterStyle="border: 1px solid lightGrey"
              sortBy="#{element.email}"
              style="width:200px; background-image:none;">                      
        <h:outputText value="#{nsn:substring(element.email, 25)}"
                      title="#{element.email.length() > 25 ? element.email : ''}"
                      style="#{element.email.length() > 25 ? 'cursor: help;' : ''}" />
    </p:column> 

    <!--  Resource Dispatchable -->
    <p:column headerText="#{crud['lov.assignment.dispatch.filter']}" 
              style="width: 15px; text-align: center;" rendered="#{not globalScreen}">                      
        <p:cellEditor>  
            <f:facet name="output">  
                <h:graphicImage library="images" name="positive_green_hand_16x16.png" 
                                styleClass="ico" style="padding-left: 2px;" 
                                rendered="#{manager.engineerDispatchable(element)}" />
                <h:graphicImage library="images" name="negative_red_hand_16x16.png" 
                                styleClass="ico" style="padding-left: 2px;" 
                                rendered="#{not manager.engineerDispatchable(element)}" />
            </f:facet>  
            <f:facet name="input">  
                <p:selectBooleanCheckbox value="#{manager.engineerDispatchable(element)}" />
            </f:facet>  
        </p:cellEditor>  
    </p:column> 

    <!-- Options -->
    <p:column headerText="#{crud['escalation.matrix.elements.options']}" 
              style="width: 60px; text-align: center;" rendered="#{not (manager.instance.isGlobalTeam() and manager.managed and manager.teamScreen)}">  
        <h:commandLink id="remove" action="#{manager.removeResource(element)}">
            <h:graphicImage library="images" title="#{actions['remove']}"
                            name="blue_minus_signal_16x16.png" styleClass="ico" />
            <f:ajax execute="@form" render=":crudForm:teamList :messages" />
        </h:commandLink>
    </p:column>   
</p:dataTable>

这背后的原因是什么，它与CSS问题有关吗？