JSF 3.0 DataTable 嵌套表单

我像实现一个功能，DataTabl中有一个list，想展现如图效果，可是列对不其，各位大侠是否有更好的方法。求解决。

代码如下，
<p:dataTable id="resultTable" var="result" value="#{shippingOrderCostExchangeRateAm.queryResults}" border="1"
paginator="false" resizableColumns="true" scrollable="true" paginatorPosition="top">
<p:columnGroup type="header">
<p:row>
<p:column style="width:20px" />
<p:column headerText="协议类型" styleClass="cbs-col-normal" />
<p:column headerText="协议号" styleClass="cbs-col-normal" />
<p:column style="width:20px" />
<p:column headerText="托单号" styleClass="cbs-col-middle" />
<p:column headerText="业务识别号" styleClass="cbs-col-middle" />
<p:column headerText="船名" styleClass="cbs-col-middle" />
<p:column headerText="航次" styleClass="cbs-col-middle" />
<p:column headerText="SVVD" styleClass="cbs-col-middle" />
<p:column headerText="装港" styleClass="cbs-col-middle" />
<p:column headerText="卸港" styleClass="cbs-col-middle" />
<p:column headerText="收/付" styleClass="cbs-col-middle" />
<p:column headerText="协议号" styleClass="cbs-col-middle" />
<p:column headerText="费用代码" styleClass="cbs-col-middle" />
<p:column headerText="费用组" styleClass="cbs-col-middle" />
<p:column headerText="业务类型" styleClass="cbs-col-middle" />
<p:column headerText="原币种" styleClass="cbs-col-middle" />
<p:column headerText="原币金额" styleClass="cbs-col-middle" />
<p:column headerText="协议币种" styleClass="cbs-col-middle" />
<p:column headerText="协议金额" styleClass="cbs-col-middle" />
<p:column headerText="业务开始时间" styleClass="cbs-col-middle" />
<p:column headerText="业务开始时间" styleClass="cbs-col-middle" />
</p:row>
</p:columnGroup>

<p:column style="width:20px">
<h:selectBooleanCheckbox id="headSelected" value="#{result.selected}">
<p:ajax listener="#{shippingOrderCostExchangeRateAm.onRowQuerySelect}" process="@this,resultTable"
event="click" update="resultTable,resultPanel">
</p:ajax>
<f:param name="agmtItem" value="#{result.agmtItem}" />
</h:selectBooleanCheckbox>
</p:column>

<p:column styleClass="cbs-col-normal">
<h:outputText value="#{result.agmtTypeCn}" />
</p:column>
<p:column styleClass="cbs-col-normal">
<h:outputText value="#{result.agmtCde}" styleClass="cbs-col-normal" />
</p:column>
<p:column colspan="19">
<table>
<ui:repeat var="items" value="#{result.resultItems}">
<tr>
<td><span style="width: 20px"><h:selectBooleanCheckbox id="headSelected"
value="#{items.selected}" style="width:20px" readonly="#{!items.selected}" disabled="#{!items.selected}"/></span></td>
<td><span styleClass="cbs-col-middle"><h:outputText value="#{items.docRefCde}"
styleClass="cbs-col-middle" /></span></td>
<td style="width:1303"><h:outputText value="#{items.bizRefCde}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.vessleName}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.voyageNumber}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.svvdId}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.polName}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.podName}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.itemTypeNm}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.chargCde}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.chargGrpCde}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.bizRefType}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.orgCcyCde}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.orgAmount}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.agmtCcyCde}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.agmtAmount}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items.bizDateFrom}" styleClass="cbs-col-middle" /></td>
<td><h:outputText value="#{items. bizDateTo}" styleClass="cbs-col-middle" /></td>
</tr>
</ui:repeat>
</table>
</p:column>

</p:dataTable>