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