将数据添加到表后，af：table缺少对齐标题

Question

我有一个如下的af：table：

<f:facet name="first" >
<af:panelCollection id="pc1"   styleClass="AFStretchWidth"
binding="#{pageFlowScope.bean.pg}">
<af:table value="#{bindings.list.collectionModel}"
 var="row" columnStretching="multiple"
 selectionListener="#{pageFlowScope.bean.selectListner}"
 selectedRowKeys="#{bindings.list.collectionModel.selectedRow}"
 rowSelection="single" width="100%"
 rows="#{bindings.list.rangeSize}"
 autoHeightRows="1">
 <af:column  width="21%"
   headerText="#{Bundle.data1}"> 
   <af:outputText value="#{row.data1}" id="ot2"/>   
   </af:column>
<af:column  width="20%" 
 headerText="#{Bundle.data2}">
<af:outputText value="#{row.data2}"
id="ot1"/>

其余各列

问题是我在表格中插入了多行之后 滚动条出现，并且标题与内容未对齐，如下图所示：