在dataGrid中对齐dataGrid和dataTable

时间:2015-08-11 08:05:59

标签: css jsf datagrid datatable richfaces

我正在使用RichFaces 4.3.6。我有一个由dataGrid和dataTable组成的dataGrid 如何与顶部内部dataGrid和dataTable对齐?
vertical-align:top不起作用。
我还希望将dataGrid中包含的图像居中。它们垂直居中但不是水平的。我怎样才能做到这一点 ? Here a picture to show what I want

<rich:panel> 
            <rich:dataGrid  value="#{isb.bloc.groups}" var="group" columns="#{isb.bloc.groupsSize}" styleClass="data-grid" >
                            <rich:dataGrid value="#{group.items}" var="item" columns="#{group.colNumber}" elements="#{group.itemsSize}" styleClass="data-grid">  
                                <f:facet name="header">
                                    <h:outputText value="#{group.name}" class="facet-datagrid"></h:outputText>
                                </f:facet>
                                <rich:panel>
                                    <h:graphicImage value="/img/#{item.image.id}/#{item.image.type}" width="#{item.image.width}" height="#{item.image.height}" class="image" />    
                                </rich:panel>
                            </rich:dataGrid>

                            <h:dataTable value="#{group.remarks}" var="rem" styleClass="data-table">
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText class="left block" value="#{msg['details']}"></h:outputText>
                                    </f:facet>
                                    <h:outputText class="left block" value="#{rem.detail}"></h:outputText>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">  
                                        <h:outputText class="right block" value="#{msg['delays']}"></h:outputText>
                                    </f:facet>
                                    <h:outputText class="right block" value="#{rem.delay}"></h:outputText>
                                </h:column>
                            </h:dataTable>    
            </rich:dataGrid>
</rich:panel> 


.data-table{
    width: 100%;
    vertical-align: top;
}

.data-grid{
    width: 100%;
    vertical-align: top;
}

.image{
    padding: 10px; 
}

0 个答案:

没有答案