primefacesのデータテーブルを使っています。レイアウトとして、データテーブルを
0,1
2,3
4,5
のように奇数行と偶数行を横に並べて作りたいと思っているのですがどうしてもうまくいきません。
偶数行と奇数行の<tr>のcssを載せますのでどこがいけないのかご教授いただけると本当に助かります。よろしくお願いいたします。
css
1.ui-datatable-odd { 2 background: none repeat scroll 0 0 transparent; 3 4 float: left; 5 display: inline; 6 clear: right; 7 position: relative; 8 margin-left: 50px; 9} 10.ui-datatable-even { 11 background: none repeat scroll 0 0 transparent; 12 /*margin-bottom: 30px;*/ 13 float: left; 14 display: inline; 15 16 position: relative; 17 margin-left: 50px; 18 19 20column-couple { 21 /* margin: auto; 22 */ 23 margin-left: auto; 24 margin-right: auto; 25 align-content: center; 26 text-align: center; 27 /*float: left;*/ 28 min-width: 300px; 29 min-height: 300px; 30} 31 32.column-couple1 { 33 /* margin: auto; 34 */ margin-left: auto; 35 margin-right: auto; 36 align-content: center; 37 text-align: center; 38 float: left; 39} 40.column-couple2 { 41 /* margin: auto; 42 */ 43 margin-left: auto; 44 margin-right: auto; 45 align-content: center; 46 text-align: center; 47 float: left; 48 49} 50 51.column-couple3 { 52 margin: auto; 53 margin-left: auto; 54 margin-right: auto; 55 align-content: center; 56 text-align: center; 57 float: left; 58 59} 60 61}
xhtml
1 <p:dataTable class="table couple-table" paginatorPosition="bottom" 2 var="info" value="#{bb.coupleList}" widgetVar="couple" rows="10" paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"> 3 4 <p:column class="column-couple" > 5 <p:graphicImage value="#{bb.pic}" class="img-find"> 6 <f:param name="id" value="#{info.id}"/> 7 </p:graphicImage> 8 </p:column><br/> 9 <div class="name-address-detail"> 10 <p:column class="column-couple1"> 11 <h:outputText value="#{info.first}" />さん 12 </p:column> 13 <br/> 14 <p:column class="column-couple2"> 15 <h:outputText value="#{info.ad}" /> 16 </p:column> 17 <br/> 18 <p:column class="column-couple3"> 19 <h:commandLink action="#{bb.detail(info.id)}"> 20 詳細へ 21 </h:commandLink> 22 </p:column> 23 </div> 24 25 </p:dataTable>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。