How to set the width for the dataTable rendered column in JSF ?

Question

JSF h:column tag fix width

Hi, I tried this way, But I couldn't get this working. With the rendered HTML , I don't see a width Attribute either for the Header or for the dataTable rows. I am using JSF 1.2 without any component libs. Any idea ? What could be the problem?

Answer 1

That linked answer honestly doesn't make sense to me. The <h:column> as it is in the default JSF implementation does not support those attributes at all. It's far beyond me why it got 6 votes and is marked accepted. It'll be ignorance or coincidence (maybe both the questioner and answer are using a JSF implementation I am not aware of which has a renderer for <h:column> which automagically converts all unknown attributes into real HTML attributes, but at least, the standard JSF RI / Mojarra doesn't do that, MyFaces maybe?).

That said, to style the columns separately, you need to make use of the columnClasses attribute of the <h:dataTable>. It accepts a commaseparated string of CSS class names which will be subsequently applied on the <td> elemenes generated by <h:column>.

<h:dataTable columnClasses="column1,column2,column3">
    <h:column>...</h:column>
    <h:column>...</h:column>
    <h:column>...</h:column>
</h:dataTable>

This will end up as something like:

<table>
    <tbody>
        <tr>
            <td class="column1">...</td>
            <td class="column2">...</td>
            <td class="column3">...</td>
        </tr>
    </tbody>
</table>

To specify the width, just apply CSS accordingly.

.column1 { width: 200px; }
.column2 { width: 100px; }
.column3 { width: 50px; }