Primefaces datatable horizontal scroll not working

Question

I have the following datatable and set scrollable=true and scrollWidth=400 but table is not display as scrollable.

The horizontal scroll is not visible and the columns are not aligned with the header width.

I view the HTML code of the table, and found that all the s in do not have the style width. What did I miss out?

<script type="text/javascript">
function queryAjaxEvent(data) {
    if(data.status=="success") {
         $('#part1').hide();
         $('#part2').show();
    }
}
</script>

<div id="part1">
    <h:form id="form1">
        <h:inputText id="shipmentNo"  value="#{shipmentBean.shpmntNo}"/>
        <h:commandButton action="#{shipmentBean.queryShipment}">
             <f:ajax execute="@form" render=":form2" onevent="queryAjaxEvent"/>
        </h:commandButton>
    </h:form>
</div>

<div id="part2" style="display:none;">
     <h:form id="form2">
        <p:dataTable var="ship" value="#{shipmentBean.lsShipment}" scrollable="true" scrollWidth="400">
            <p:column headerText="Shipment Id" width="50">
                <h:outputText value="#{ship.shipmentId}" />
            </p:column>
            <p:column headerText="Origin Code" width="150">
                <h:outputText value="#{ship.orgCode}" />
            </p:column>
            <p:column headerText="OriginArea" width="150">
                <h:outputText value="#{ship.orgArea}" />
            </p:column>
            <p:column headerText="Origin Facility"  width="150">
                <h:outputText value="#{ship.orgFacility}"/>
            </p:column>
            <p:column headerText="Destination Country" width="150">
                <h:outputText value="#{ship.destCountry}" />
            </p:column>
            <p:column headerText="Destination Service" width="150">
                <h:outputText value="#{ship.destService}" />
            </p:column>
            <p:column headerText="Destination Facility" width="150">
                <h:outputText value="#{ship.destFacility}"/>
            </p:column>
            <p:column headerText="PCC Data" width="150">
                <h:outputText value="#{ship.pccData}"/>
            </p:column>
            <p:column headerText="ddd aa Data" width="150">
                <h:outputText value="#{ship.dddaaData}"/>
            </p:column>
        </p:dataTable>
     </h:form>
</div>

Answer 1

<p:column headerText="Origin Code">
      <h:outputText value="#{ship.orgCode}" width="150"/>
</p:column>

You should use attribute width="150" inside the p:column instead of h:outputText

<p:column headerText="Origin Code" width="150">
      <h:outputText value="#{ship.orgCode}" />
</p:column>