使用CSS從表中創建一個網格庫

Question

我有一個dataTable，我用它來添加一堆圖像，並將liveScroll設置爲true。這將在html中創建一個表，並且每行的類都是'ui-datatable-odd'或'ui-datatable-even。我試圖使用CSS將表格顯示爲網格圖庫，每行兩個圖像。 下面是我primeFaces代碼：

<h:form> 
<p:dataTable id="campaignDataGrid" var="campaignImage" value="#{allCampaignImages}" 
    scrollRows="9" scrollHeight="500" scrollable="true" liveScroll="true"> 

    <!-- <p:column> 
     Description: <h:outputText value="#{campaignImage.description}" /><br /> 
     Location: <h:outputText value="#{campaignImage.location}" /> 
    </p:column> --> 

    <p:column> 
     <div class="cell"> 
      <p:graphicImage value="#{campaignImage.url}" /> 
     </div> 
    </p:column> 

</p:dataTable> 

我只是用這個的CSS：

​​

這裏是生成的HTML代碼：

<div id="j_idt40:campaignDataGrid" class="ui-datatable ui-widget ui-datatable-scrollable"><div class="ui-widget-header ui-datatable-scrollable-header"><div class="ui-datatable-scrollable-header-box"><table role="grid"><thead><tr role="row"><th id="j_idt40:campaignDataGrid:j_idt42" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span></span></div></th></tr></thead></table></div></div><div class="ui-datatable-scrollable-body" style="height:500px;"><table role="grid"><tbody id="j_idt40:campaignDataGrid_data" class="ui-datatable-data ui-widget-content"><tr data-ri="0" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:0:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/188" alt="" /> 
        </div></div></td></tr><tr data-ri="1" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:1:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/182" alt="" /> 
        </div></div></td></tr><tr data-ri="2" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:2:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/178" alt="" /> 
        </div></div></td></tr><tr data-ri="3" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:3:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/173" alt="" /> 
        </div></div></td></tr><tr data-ri="4" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:4:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/168" alt="" /> 
        </div></div></td></tr><tr data-ri="5" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:5:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/163" alt="" /> 
        </div></div></td></tr><tr data-ri="6" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:6:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/158" alt="" /> 
        </div></div></td></tr><tr data-ri="7" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:7:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/153" alt="" /> 
        </div></div></td></tr><tr data-ri="8" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:8:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/148" alt="" /> 
        </div></div></td></tr></tbody></table></div><div class="ui-widget-header ui-datatable-scrollable-footer"><div class="ui-datatable-scrollable-header-box"><table role="grid"><tfoot></tfoot></table></div></div><input type="hidden" id="j_idt40:campaignDataGrid_scrollState" name="j_idt40:campaignDataGrid_scrollState" autocomplete="off" value="0,0" /></div><script id="j_idt40:campaignDataGrid_s" type="text/javascript">PrimeFaces.cw('DataTable','widget_j_idt40_campaignDataGrid',{id:'j_idt40:campaignDataGrid',scrollable:true,liveScroll:true,scrollStep:9,scrollLimit:38});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="6974751656016471616:-1737664871390977073" autocomplete="off" /> 

，這是它的樣子：

所以，你可以看到，問題是，當我定位奇數行，這些行仍然在那裏，即使其內容已被移動。任何人都可以幫忙嗎？

Answer 1

我打得四處你的HTML/CSS和本想出了： http://jsfiddle.net/dPKBR/

我飄來，奇，甚至TRS和做了明確的：無論在偶數的TR：

.ui-datatable-odd { 
    width:100px; 
    background:orange; 
    float:left; 
    position: relative; 
    display: block; 

} 

.ui-datatable-even{ 
    clear:both; 
    width:100px; 
    background:lime; 
    float:left; 
    position: relative; 
    display: block; 
} 

它應該讓你更接近解決你的問題。