面对水平滚动问题

Question

我正在使用数据表来显示主要面中的所有记录。在这个数据表中我有12列。这些列都在相同的行中，并且由于这种水平滚动会激活并分散屏幕视图。

Datatable ::

的代码

 <p:dataTable id="reqActList" paginatorAlwaysVisible="true"
    var="reqInfo" value="#{reqSummaryHandler.certActListModel}"
    paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
    paginator="true" rows="#{label.accountList_defaultNumberOfRows}"
    rowsPerPageTemplate="#{label.accountList_numberOfRows}" width="60%">
  <!--Columns are define here -->
 <p:column style="text-align:center;" width="5%">
        <f:facet name="header">
            <h:outputLabel value="Select" />
        </f:facet>
        <h:selectBooleanCheckbox id="select" value="#{reqInfo.change}">
            <f:ajax event="click" render="@form"
                listener="#{reqSummaryHandler.selectCertList}">
            </f:ajax>
            <f:attribute name="selectCert" value="#{reqInfo}" />
        </h:selectBooleanCheckbox>
    </p:column>
    <p:column sortBy="#{reqInfo.certificateNumber}"
                    filterBy="#{reqInfo.certificateNumber}" style="text-align:center;white-space: normal;nowrap">
        <f:facet name="header">
            <h:outputLabel value="#{label.certNumber}" />
        </f:facet>
        <h:outputText align="left" value="#{reqInfo.certificateNumber}" />
    </p:column>
    <p:column sortBy="#{reqInfo.certificateVersion}"
                    filterBy="#{reqInfo.certificateVersion}" style="text-align:center;white-space: normal;nowrap">
        <f:facet name="header">
            <h:outputLabel value="Version" />
        </f:facet>
        <h:outputText align="left" value="#{reqInfo.certificateVersion}" />
    </p:column>
    <p:column sortBy="#{insuredInfo.generalPartyInfo.nameInfo.commlName.commercialName}"
                    filterBy="#{insuredInfo.generalPartyInfo.nameInfo.commlName.commercialName}" style="text-align:center;white-space: normal;nowrap">
        <f:facet name="header">
            <h:outputLabel value="Insured" />
        </f:facet>
        <ui:repeat value="#{reqInfo.insuredOrPrincipalList}"
            var="insuredInfo">
            <h:outputText align="left"
                value="#{insuredInfo.generalPartyInfo.nameInfo.commlName.commercialName}" />
        </ui:repeat>
    </p:column>
    <p:column sortBy="#{reqInfo.certificateHolder.additionalInterest.generalPartyInfo.nameInfo.commlName.commercialName}"
                    filterBy="#{reqInfo.certificateHolder.additionalInterest.generalPartyInfo.nameInfo.commlName.commercialName}" style="text-align:center;white-space: normal;nowrap">
        <f:facet name="header">
            <h:outputLabel value="Certificate Holder" />
        </f:facet>
        <h:outputText align="left"
            value="#{reqInfo.certificateHolder.additionalInterest.generalPartyInfo.nameInfo.commlName.commercialName}" />
    </p:column>
    <p:column sortBy="#{reqInfo.businessPurposeTypeCd}"
                    filterBy="#{reqInfo.businessPurposeTypeCd}" style="text-align:center;white-space: normal;nowrap">
        <f:facet name="header">
            <h:outputLabel value="Activity Performed" />
        </f:facet>
        <h:outputText align="left" value="#{reqInfo.businessPurposeTypeCd}" />
    </p:column>
    <p:column style="text-align:center;white-space: normal;nowrap"
        filterBy="#{reqInfo.com_csc_StatusCd}"
        sortBy="#{reqInfo.com_csc_StatusCd}" styleClass="activityStyle">
        <f:facet name="header">
            <h:outputLabel value="Certificate Status" />
        </f:facet>
        <h:outputText align="left" value="#{reqInfo.com_csc_StatusCd}" />
    </p:column>
    <p:column sortBy="#{reqInfo.certWordingEndorsementInd}"
                    filterBy="#{reqInfo.certWordingEndorsementInd}" style="text-align:center;white-space: normal;nowrap">
        <f:facet name="header">
            <h:outputLabel value="Third Party" />
        </f:facet>
        <h:outputText align="left"
            value="#{reqInfo.certWordingEndorsementInd}" />
    </p:column>
    <p:column sortBy="#{reqInfo.manualInd}"
                    filterBy="#{reqInfo.manualInd}" style="text-align:center;white-space: normal;nowrap">
        <f:facet name="header">
            <h:outputLabel value="Manual Form" />
        </f:facet>
        <h:outputText align="left" value="#{reqInfo.manualInd}" />
    </p:column>
    <p:column sortBy="#{reqInfo.mnlAddendumInd}"
                    filterBy="#{reqInfo.mnlAddendumInd}" style="text-align:center;white-space: normal;nowrap">
        <f:facet name="header">
            <h:outputLabel value="Manual Addendum" />
        </f:facet>
        <h:outputText align="left" value="#{reqInfo.mnlAddendumInd}" />
    </p:column>
    <p:column style="text-align:center;white-space: normal;nowrap">
        <f:facet name="header">
            <h:outputLabel value="Path" />
        </f:facet>
        <p:cellEditor>
            <f:facet name="output">
                <h:outputText id="pathSelection" align="left"
                    value="#{reqInfo.com_csc_CertificateDispositionCd}"
                    readonly="true" />
            </f:facet>
            <f:facet name="input">
                <h:selectOneMenu
                    value="#{reqInfo.com_csc_CertificateDispositionCd}">
                    <f:selectItems value="#{supportData.requestRoutePath}"
                        itemValue="#{supportData.requestRoutePath}" />
                </h:selectOneMenu>
            </f:facet>
        </p:cellEditor>
        <p:rowEditor rendered="#{reqInfo.enabled}" />
    </p:column>
    <p:column style="text-align:center;white-space: normal;nowrap">
        <f:facet name="header">
            <h:outputLabel value="Action" />
        </f:facet>
        <p:commandLink id="ViewCertificate"
            update="accountSummaryForm,reqActList,ViewCertificate,URLVal"
            value="#{label.viewCert}" oncomplete="navigateNewWindow()">
            <f:setPropertyActionListener value="#{reqInfo}" name="selectCert"
                target="#{reqSummaryHandler.selectedCertificate}" />
            <f:setPropertyActionListener value="Link" name="selectCert"
                target="#{reqSummaryHandler.selection}" />
            <f:setPropertyActionListener value="#{reqInfo}" name="selectCert"
                target="#{reqSummaryHandler.certDocRequest}" />
        </p:commandLink>
        <p:spacer width="5" height="2" />
        <ui:repeat value="#{reqInfo.availableFunctions.funArrayCertListForReqActivity}"
            var="linkInfo">
            <h:commandLink id="View" value="#{linkInfo.label}"
                action="#{linkInfo.getLabel}" ajax="false">
                <f:setPropertyActionListener  value="#{reqInfo}"
                                            name="selectCert"
                    target="#{reqSummaryHandler.selectedCertificate}" />
                <f:setPropertyActionListener value="Link" 
                                            name="selectCert"
                    target="#{reqSummaryHandler.selection}" />
            </h:commandLink>
            <p:spacer width="5" height="2" />
        </ui:repeat>
    </p:column>

我不想要水平滚动。

请给我任何建议......