设置dataTable中所有列的宽度

时间:2012-07-19 16:30:49

标签: html jsf-2 datatable column-width

我使用JSF2.0在JSF页面中使用dataTable以表格格式显示数据。以下是我的代码。

<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>

我想要的是将Description列的宽度设置为80%,并将列Cost的宽度设置为20%

知道如何完成这项工作吗?

1 个答案:

答案 0 :(得分:3)

以下是我的表现......

<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>

在css我有

.setWidthOfFirstColumn {
    width: 80%;
}

.setWidthOfSecondColumn {
    width: 20%;
}