Columns alignment in in h:panelGrid

Question

I have this table with 3 columns. The third column is for validation message which by default is empty.

<h:form>
    <h:panelGrid id="panel" styleClass="data_table_pricing" columns="3">

        <h:outputText value="Title"/>

        <h:inputText id="title" value="#{pricingForm.title}" validatorMessage="Value is too big.">
            <f:validateLength minimum="0" maximum="40" />
            <f:ajax event="change" render="@form"/>
        </h:inputText>

        <h:message id="title_message" for="title" style="color:red"/>

        <!-- // -->

        <h:outputText value="First name"/>

        <h:inputText id="first_name" value="#{pricingForm.firstName}" validatorMessage="Value is too big.">
            <f:validateLength minimum="0" maximum="40" />
            <f:ajax event="change" render="@form"/>
        </h:inputText>

        <h:message id="first_name_message" for="first_name" style="color:red"/>

        <!-- // -->

        <h:outputText value="Last name"/>

        <h:inputText id="last_name" value="#{pricingForm.lastName}" validatorMessage="Value is too big.">
            <f:validateLength minimum="0" maximum="40" />
            <f:ajax event="change" render="@form"/>
        </h:inputText>

        <h:message id="last_name_message" for="last_name" style="color:red"/>

        <!-- // -->

    </h:panelGrid>

    <h:commandLink value="reset" class="link" type="reset" style="margin: 20px;">
        <f:ajax execute="@form" render="@form"/>
    </h:commandLink>
    <h:commandLink value="Next" class="link" style="margin: 20px;" actionListener="#{pricingForm.calculatorPage()}">
        <f:ajax execute="@form" render="@form"/>
    </h:commandLink>

</h:form>

I use this CSS code to style the table:

.data_table_pricing {
    border-spacing: 12px;
    border-collapse: separate;
    width: 100%;
}

I need to find a way to fix the size the columns. When validation message appears the second column is pushed to the left.

Is there any way to fix the size of the columns?

Answer 1

Setting a fixed width to the td element prevents the column jump.

.data_table_pricing tbody tr td {
  width: 33%;
}

Edit:

Solution for variable number of table columns and should be used over above method.

table.data_table_pricing {
  table-layout: fixed;
}