Question

I am showing data in table format using dataTable in JSF page using JSF2.0. Below is the code that I have.

<h:dataTable id="patentBudgetList" var="patentBudgetList" value="#{PersonalInformationDataBean.budgetInfoList}"  border="1" width="40%">
    <h:column>
        <f:facet name="header">
            <h:outputText value="Description" />
        </f:facet>
        <h:outputText value="#{patentBudgetList.budgetTitle}"/>  
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Cost" />
        </f:facet>
        <h:outputText value="#{patentBudgetList.budgetCost}"/>
    </h:column>
</h:dataTable>

What I want is to set the width of Description column to 80% and set width of column Cost to 20%.

Any idea how to get this done?

Answer 1

Below is how I did…

<h:dataTable id="patentBudgetList" var="patentBudgetList" 
 value="#{PersonalInformationDataBean.budgetInfoList}"  
 border="1" width="40%"
 columnClasses="setWidthOfFirstColumn,setWidthOfSecondColumn"
>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Description" />
        </f:facet>
        <h:outputText value="#{patentBudgetList.budgetTitle}"/>  
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Cost" />
        </f:facet>
        <h:outputText value="#{patentBudgetList.budgetCost}"/>
    </h:column>
</h:dataTable>

And in css I have

.setWidthOfFirstColumn {
    width: 80%;
}

.setWidthOfSecondColumn {
    width: 20%;
}