Set JSF column header width in fixed size table

Question

I have a JSF datatable with table-layout: fixed, where I am trying to set the percentage width for each column. I realized that if I add the width attribute to the title in IE, then it will work as expected. However, I cannot figure out how to add this width attribute to the code. I added an attribute inside the facet header, but that didn't work. It also did not work with customization inside the column tag.

If anyone can help me, this will 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 <h:column> attribute to indicate the header style class.

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

using for example this CSS

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