Set width for JSF column header in fixed-size table

Question

I have a JSF datatable with table-layout:fixed, where I'm trying to set percentage based width for each column. I figured that if i add a width attribute to the header in IE, then it works as expected. However, I cant figure out how to add this width attribute in the code. I have added an attribute inside the facet header, but that didnt work. It didnt work setting it inside the column tag either.

If anyone could help me out it would be appreciated.

<h:column>
     <f:facet name="header">
         <h:outputText 
             value="#{messageSource['tasks.headline.task']}" />
             <f:attribute name="width" value="20%"/>
     </f:facet>
     <t:commandLink id="lookAtTask" action="lookAtTask">
         <t:updateActionListener property="#{flowScope.localTask}"
             value="#{data.task}" />
         <h:graphicImage url="/images/icon_properties_16x16.gif"
             alt="#{messageSource['tasks.headline.task']}" />
     </t:commandLink>
</h:column>

Answer 1

You can use the headerClass attribute of the <h:column> to specify a style class of the header.

<h:dataTable ...>
    <h:column headerClass="col1">
        <f:facet name="header">...</f:facet>
        ...
    </h:column>
    <h:column headerClass="col2">
        <f:facet name="header">...</f:facet>
        ...
    </h:column>
    <h:column headerClass="col3">
        <f:facet name="header">...</f:facet>
        ...
    </h:column>
</h:dataTable>

with e.g. this CSS

.col1 { width: 20%; }
.col2 { width: 30%; }
.col3 { width: 50%; }