Question

我想在JSF中的dataTable的标题上使用CSS，但由于某些原因我不能？我已经尝试了一些不同的方法，但没有一个工作，我认为在获得行使用CSS之后会很容易。

CSS：

.table-header{ 
    text-align:center;
    background:none repeat scroll 0 0 #E5E5E5;
    border-bottom:1px solid #BBBBBB;
    padding:16px;
    }
.table-odd-row{
     background:#F8F8F8;
}
.table-even-row{
     background:#80ffff;
}

的xHTML：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
    xmlns:f="http://xmlns.jcp.org/jsf/core"

    >

<h:head>
    <title>Manu table</title>
    <h:outputStylesheet name="css/styles.css"  /> 
    <f:metadata>
        <f:event listener="#{manufacturerController.loadManufacturers()}" type="preRenderView" />
    </f:metadata>
</h:head>

<h:body>
    <h:form>
    <h:commandButton value="Add Manufacturer" action="ManufacturerInput" />
        <h:dataTable value="#{manufacturerController.manufacturers}" var="m"
                 headerClass="table-header" rowClasses="table-odd-row,table-even-row">
            <h:column >                 
             <f:facet name="header">Manu Code</f:facet>                 
                    #{m.manu_code}
             </h:column>
            <h:column>
                <f:facet name="header">Manu Name</f:facet>
                    #{m.manu_name}
             </h:column>
            <h:column>
                <f:facet name="header">Manu Details</f:facet>
                    #{m.manu_details}
            </h:column>
            <h:column>
                <f:facet name="header">Action</f:facet>
                    <h:link value="Update" outcome="ManuUpdate" />
                    <br></br>
                    <h:link value="Delete" outcome="ManuDelete" />
            </h:column>
            </h:dataTable>  
    </h:form>
</h:body>
</html>

h：我的自定义样式看不到datatable headerClass

0 个答案: