Javascript 列标题名称中的额外垂直线

我在primefaces中有一个datatable，有9列。在一些列中，如第3列、第4列，显示额外的垂直线，在其余列中，它不显示任何额外的垂直线

<p:dataTable id="accCertificateList" var="cert"
                        styleClass="mySubPanelStyle"

        value="#{certificateSearchHandler.certificateInfoList}"
                        paginator="true" rows="#  {label.accountList_defaultNumberOfRows}"
                        paginatorTemplate="{CurrentPageReport}   {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        rowsPerPageTemplate="#{label.accountList_numberOfRows}">
                        <p:column style="width:5%;vertical-align: top;" >
                            <f:facet name="header">
                                <h:outputLabel value="Select" />
                            </f:facet>
                            <h:selectBooleanCheckbox value="#{cert.change}">
                                <f:ajax event="click"
                                    render=":certificateList:certificateListCertGrid"
                                    listener="#{certificateSearchHandler.selectCertList}"
                                    update=":certificateList:certificateListCertGrid">
                                </f:ajax>
                                <f:attribute name="selectCert" value="#{cert}" />
                            </h:selectBooleanCheckbox>
                        </p:column>
                        <p:column style="text-align:center;white-space: normal;width:8%; vertical-align: top;" 
                            filterBy="#{cert.certificateNumber}" filterStyle ="width:35px"
                            sortBy="#{cert.certificateNumber}">
                            <f:facet name="header">
                                <h:outputLabel value="#{label.certNo}" />
                            </f:facet>
                            <h:graphicImage id="lock" rendered="#{cert.certificateLock}"
                                        style="width:25%" url="/images/icons/I_Lock.png">
                                        <p:tooltip targetPosition="bottomLeft" Delay="0"
                                            showDelay="0">
                                            <h:outputText value="#{label.lockTime}"
                                                style="font-weight:bold" />
                                            <h:outputText value=": #{cert.lockTime}" />
                                            <p:spacer width="1" height="10" />
                                            <h:outputText value="#{cert.label} " style="font-weight:bold" />
                                            <h:outputText value=": #{cert.userDetails}" />

                                        </p:tooltip>

                                    </h:graphicImage>
                            <h:outputText value="#{cert.certificateNumber}" />
                        </p:column>

                        <p:column style="text-align:center;white-space: normal;nowrap;width:15%; vertical-align: top;"
                            filterBy="#{cert.certificateHolder.additionalInterest.generalPartyInfo.nameInfo.commlName.commercialName}"
                            sortBy="#{cert.certificateHolder.additionalInterest.generalPartyInfo.nameInfo.commlName.commercialName}"
                            filterMatchMode="startsWith">
                            <f:facet name="header">
                                <h:outputLabel value="#{label.certHolder}" />
                            </f:facet>
                            <h:outputText
                                value="#{cert.certificateHolder.additionalInterest.generalPartyInfo.nameInfo.commlName.commercialName}" />
                        </p:column>

                        <p:column style="text-align:center;white-space: normal;nowrap;width:25%; vertical-align: top;" 
                            filterBy="#{cert.holderaddress}" 
                            sortBy="#{cert.holderaddress}"
                            filterMatchMode="startsWith">
                            <f:facet name="header">
                                <h:outputLabel value="#{label.certHolderAddr}" />
                            </f:facet>
                            <h:outputText
                                value="#{cert.holderaddress}"/>
                        </p:column>
                        <p:column style="text-align:center;white-space: normal;nowrap;width:15%; vertical-align: top;" 
                            filterBy="#{cert.insureds}" sortBy="#{cert.insureds}"
                            filterMatchMode="startsWith">
                            <f:facet name="header">
                                <h:outputLabel value="#{label.insured}" />
                            </f:facet>

                            <h:outputText value="#{cert.insureds}" />

                        </p:column>

                        <p:column style="text-align:center;white-space: normal;width:9%; vertical-align: top;" 
                            filterBy="#{cert.statusOnScreen}" filterStyle ="width:55px"
                            sortBy="#{cert.statusOnScreen}">
                            <f:facet name="header">
                                <h:outputLabel value="#{label.certStatus}" />
                            </f:facet>
                            <h:outputText value="#{cert.statusOnScreen}"
                                title="#{cert.statusOnScreen}" />
                        </p:column>



                        <p:column style="text-align:center;white-space: normal;width:10%; vertical-align: top;" 
                            filterBy="#{cert.certificateIssuedDt}"   filterStyle ="width:60px"
                            sortBy="#{cert.certificateIssuedDt}">
                            <f:facet name="header">
                                <h:outputLabel value="#{label.issueDt}" />
                            </f:facet>
                            <h:outputText value="#{cert.certificateIssuedDt}" />
                        </p:column>

                        <p:column style="text-align:center;white-space:normal;width:5%;vertical-align: top;" >
                            <f:facet name="header">
                                <h:outputLabel value="#{label.thirdParty}" />
                            </f:facet>
                            <h:outputText value="#{cert.com_csc_EndorsementTPInd}" />
                        </p:column>

                        <p:column style="text-align:center;width:6%;vertical-align: top;">
                            <f:facet name="header">
                                <h:outputLabel value="#{label.certAction}" />
                            </f:facet>
                            <ui:repeat
                                value="#{cert.availableFunctions.functionArrayCertList}"
                                var="linkInfo">
                                <h:commandLink id="View" value="#{linkInfo.label}"
                                    action="#{linkInfo.getLabel}" ajax="false"
                                    disabled="#{linkInfo.disable}">
                                    <f:setPropertyActionListener value="#{cert}"  name="selectCert"
                                        target="#{certificateSearchHandler.selectedCertificate}" />
                                    <f:setPropertyActionListener value="Link"  name="selectCert"
                                        target="#{certificateSearchHandler.selection}" />
                                </h:commandLink>
                                <p:spacer width="5" height="2" />
                            </ui:repeat>
                        </p:column>
                    </p:dataTable>

您的代码中有太多东西无法确定。如果从列中删除“内联样式”属性，垂直条是否会消失？尝试在Firefox中打开页面，并使用Firebug插件从表格标题中删除CSS，直到该条消失。这可能与

nowrap

和百分比宽度的使用有关。您的问题可能是一些样式问题，您的代码无法帮助解决这些问题。如果您可以提供表格标题区域的实际输出html和任何相关css（或指向实时示例的链接），那么可能有人可以帮助您。注意：在我看来，它可能是头中的一个附加表单元格，碰巧设置了右边框属性，但不应该设置。