css - h :panelGrid 中的列对齐

Question

我有一张包含 3 列的表格。第三列用于验证消息，默认情况下为空。

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

我使用此 CSS 代码来设置表格样式:

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

我需要找到一种方法来固定列的大小。当出现验证消息时，第二列被推到左边。

有什么方法可以固定列的大小吗？

Answer 1

为 td 元素设置固定宽度可防止列跳转。

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

编辑:

可变数量的表格列的解决方案，应该在上述方法上使用。

table.data_table_pricing {
  table-layout: fixed;
}