Использование 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:

.ui-datatable-odd { 
    position: relative; 
    display: block; 
    left: 360px; 
    bottom: 316px; 
} 

Вот сгенерированный 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:

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

Это должно помочь вам ближе к решению вашей проблемы.