質問編集履歴

3 情報追加

anonyrabbit

anonyrabbit score 74

2017/02/02 23:06  投稿

datatableの奇数行と偶数行を横一列に並べるには
動的datatableの奇数行と偶数行を横一列に並べるには
primefacesのデータテーブルを使っています。レイアウトとして、データテーブルを
0,1
2,3
4,5
のように奇数行と偶数行を横に並べて作りたいと思っているのですがどうしてもうまくいきません。
偶数行と奇数行の<tr>のcssを載せますのでどこがいけないのかご教授いただけると本当に助かります。よろしくお願いいたします。
```css
.ui-datatable-odd {
background: none repeat scroll 0 0 transparent;
float: left;
display: inline;
clear: right;
position: relative;
margin-left: 50px;
}
.ui-datatable-even {
background: none repeat scroll 0 0 transparent;
/*margin-bottom: 30px;*/
float: left;
display: inline;
position: relative;
margin-left: 50px;
column-couple {
/* margin: auto;
*/
margin-left: auto;
margin-right: auto;
align-content: center;
text-align: center;
/*float: left;*/
min-width: 300px;
min-height: 300px;
}
.column-couple1 {
/* margin: auto;
*/ margin-left: auto;
margin-right: auto;
align-content: center;
text-align: center;
float: left;
}
.column-couple2 {
/* margin: auto;
*/
margin-left: auto;
margin-right: auto;
align-content: center;
text-align: center;
float: left;
}
.column-couple3 {
margin: auto;
margin-left: auto;
margin-right: auto;
align-content: center;
text-align: center;
float: left;
}
}
```
```xhtml
<p:dataTable class="table couple-table" paginatorPosition="bottom"
var="info" value="#{bb.coupleList}" widgetVar="couple" rows="10" paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}">
<p:column class="column-couple" >
<p:graphicImage value="#{bb.pic}" class="img-find">
<f:param name="id" value="#{info.id}"/>
</p:graphicImage>
</p:column><br/>
<div class="name-address-detail">
<p:column class="column-couple1">
<h:outputText value="#{info.first}" />さん
</p:column>
<br/>
<p:column class="column-couple2">
<h:outputText value="#{info.ad}" />
</p:column>
<br/>
<p:column class="column-couple3">
<h:commandLink action="#{bb.detail(info.id)}">
詳細へ
</h:commandLink>
</p:column>
</div>
</p:dataTable>
```
![今のデータテーブルです](c18146badef503c99956ca229f020dde.png)
これを横一列に並べたいのですがfloatを使ってもうまくいきません。
  • CSS

    10698 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • PrimeFaces

    34 questions

    PrimeFacesは、トルコのソフトウェア会社Prime Teknolojiが提供する、 JSFリッチユーザーインターフェースコンポーネントです。 Apache License V2ライセンスのオープンソースソフトウェアです。

  • JSF

    142 questions

    JSF (JavaServer Faces)とは、JavaベースのWebアプリケーションフレームワークの一つです。

2 情報追加

anonyrabbit

anonyrabbit score 74

2017/02/02 22:40  投稿

datatableの奇数行と偶数行を横一列に並べるには
primefacesのデータテーブルを使っています。レイアウトとして、データテーブルを
0,1
2,3
4,5
のように奇数行と偶数行を横に並べて作りたいと思っているのですがどうしてもうまくいきません。
偶数行と奇数行の<tr>のcssを載せますのでどこがいけないのかご教授いただけると本当に助かります。よろしくお願いいたします。
```css
.ui-datatable-odd {
   background: none repeat scroll 0 0 transparent;
   
   float: left;
   display: inline;
   clear: right;
   position: relative;
   margin-left: 50px;
}
.ui-datatable-even {
   background: none repeat scroll 0 0 transparent;
   /*margin-bottom: 30px;*/
   float: left;
   display: inline;
   
   position: relative;
   margin-left: 50px;
 
 
column-couple {  
   /*   margin: auto;  
   */         
   margin-left: auto;  
   margin-right: auto;  
   align-content: center;  
   text-align: center;  
   /*float: left;*/  
   min-width: 300px;  
   min-height: 300px;  
}  
 
.column-couple1 {  
   /*   margin: auto;  
   */   margin-left: auto;  
   margin-right: auto;  
   align-content: center;  
   text-align: center;  
   float: left;  
}  
.column-couple2 {  
   /*   margin: auto;  
   */   
   margin-left: auto;  
   margin-right: auto;  
   align-content: center;  
   text-align: center;  
   float: left;  
 
}  
 
.column-couple3 {  
   margin: auto;  
   margin-left: auto;  
   margin-right: auto;  
   align-content: center;  
   text-align: center;  
   float: left;  
 
}  
 
}
```
```xhtml
               <p:dataTable class="table couple-table" paginatorPosition="bottom"
                            var="info" value="#{bb.coupleList}" widgetVar="couple" rows="10" paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}">
                   <p:column class="column-couple" >
                       <p:graphicImage value="#{bb.pic}" class="img-find">
                           <f:param name="id" value="#{info.id}"/>
                       </p:graphicImage>
                   </p:column><br/>
                   <div class="name-address-detail">
                       <p:column class="column-couple1">
                           <h:outputText value="#{info.first}" />さん
                       </p:column>
                       <br/>
                       <p:column class="column-couple2">
                           <h:outputText value="#{info.ad}" />
                       </p:column>
                       <br/>
                       <p:column class="column-couple3">
                           <h:commandLink action="#{bb.detail(info.id)}">
                               詳細へ
                           </h:commandLink> 
                       </p:column>
                   </div>
               </p:dataTable>
```
![今のデータテーブルです](c18146badef503c99956ca229f020dde.png)
これを横一列に並べたいのですがfloatを使ってもうまくいきません。
  • CSS

    10698 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • PrimeFaces

    34 questions

    PrimeFacesは、トルコのソフトウェア会社Prime Teknolojiが提供する、 JSFリッチユーザーインターフェースコンポーネントです。 Apache License V2ライセンスのオープンソースソフトウェアです。

  • JSF

    142 questions

    JSF (JavaServer Faces)とは、JavaベースのWebアプリケーションフレームワークの一つです。

1 情報追加

anonyrabbit

anonyrabbit score 74

2017/02/02 22:38  投稿

datatableの奇数行と偶数行を横一列に並べるには
primefacesのデータテーブルを使っています。レイアウトとして、データテーブルを
0,1
2,3
4,5
のように奇数行と偶数行を横に並べて作りたいと思っているのですがどうしてもうまくいきません。
偶数行と奇数行の<tr>のcssを載せますのでどこがいけないのかご教授いただけると本当に助かります。よろしくお願いいたします。
```css
.ui-datatable-odd {
   background: none repeat scroll 0 0 transparent;
   
   float: left;
   display: inline;
   clear: right;
   position: relative;
   margin-left: 50px;
}
.ui-datatable-even {
   background: none repeat scroll 0 0 transparent;
   /*margin-bottom: 30px;*/
   float: left;
   display: inline;
   
   position: relative;
   margin-left: 50px;
}
```
```xhtml  
               <p:dataTable class="table couple-table" paginatorPosition="bottom"  
                            var="info" value="#{bb.coupleList}" widgetVar="couple" rows="10" paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}">  
 
                   <p:column class="column-couple" >  
                       <p:graphicImage value="#{bb.pic}" class="img-find">  
                           <f:param name="id" value="#{info.id}"/>  
                       </p:graphicImage>  
                   </p:column><br/>  
                   <div class="name-address-detail">  
                       <p:column class="column-couple1">  
                           <h:outputText value="#{info.first}" />さん  
                       </p:column>  
                       <br/>  
                       <p:column class="column-couple2">  
                           <h:outputText value="#{info.ad}" />  
                       </p:column>  
                       <br/>  
                       <p:column class="column-couple3">  
                           <h:commandLink action="#{bb.detail(info.id)}">  
                               詳細へ  
                           </h:commandLink>   
                       </p:column>  
                   </div>  
 
               </p:dataTable>  
```  
 
 
![今のデータテーブルです](c18146badef503c99956ca229f020dde.png)
これを横一列に並べたいのですがfloatを使ってもうまくいきません。
  • CSS

    10698 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • PrimeFaces

    34 questions

    PrimeFacesは、トルコのソフトウェア会社Prime Teknolojiが提供する、 JSFリッチユーザーインターフェースコンポーネントです。 Apache License V2ライセンスのオープンソースソフトウェアです。

  • JSF

    142 questions

    JSF (JavaServer Faces)とは、JavaベースのWebアプリケーションフレームワークの一つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る