質問編集履歴

3

情報追加

2017/02/02 14:07

投稿

anonyrabbit
anonyrabbit

スコア78

test CHANGED
@@ -1 +1 @@
1
- datatableの奇数行と偶数行を横一列に並べるには
1
+ 動的datatableの奇数行と偶数行を横一列に並べるには
test CHANGED
File without changes

2

情報追加

2017/02/02 14:06

投稿

anonyrabbit
anonyrabbit

スコア78

test CHANGED
File without changes
test CHANGED
@@ -48,6 +48,92 @@
48
48
 
49
49
  margin-left: 50px;
50
50
 
51
+
52
+
53
+
54
+
55
+ column-couple {
56
+
57
+ /* margin: auto;
58
+
59
+ */
60
+
61
+ margin-left: auto;
62
+
63
+ margin-right: auto;
64
+
65
+ align-content: center;
66
+
67
+ text-align: center;
68
+
69
+ /*float: left;*/
70
+
71
+ min-width: 300px;
72
+
73
+ min-height: 300px;
74
+
75
+ }
76
+
77
+
78
+
79
+ .column-couple1 {
80
+
81
+ /* margin: auto;
82
+
83
+ */ margin-left: auto;
84
+
85
+ margin-right: auto;
86
+
87
+ align-content: center;
88
+
89
+ text-align: center;
90
+
91
+ float: left;
92
+
93
+ }
94
+
95
+ .column-couple2 {
96
+
97
+ /* margin: auto;
98
+
99
+ */
100
+
101
+ margin-left: auto;
102
+
103
+ margin-right: auto;
104
+
105
+ align-content: center;
106
+
107
+ text-align: center;
108
+
109
+ float: left;
110
+
111
+
112
+
113
+ }
114
+
115
+
116
+
117
+ .column-couple3 {
118
+
119
+ margin: auto;
120
+
121
+ margin-left: auto;
122
+
123
+ margin-right: auto;
124
+
125
+ align-content: center;
126
+
127
+ text-align: center;
128
+
129
+ float: left;
130
+
131
+
132
+
133
+ }
134
+
135
+
136
+
51
137
  }
52
138
 
53
139
  ```

1

情報追加

2017/02/02 13:40

投稿

anonyrabbit
anonyrabbit

スコア78

test CHANGED
File without changes
test CHANGED
@@ -56,6 +56,64 @@
56
56
 
57
57
 
58
58
 
59
+ ```xhtml
60
+
61
+ <p:dataTable class="table couple-table" paginatorPosition="bottom"
62
+
63
+ var="info" value="#{bb.coupleList}" widgetVar="couple" rows="10" paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}">
64
+
65
+
66
+
67
+ <p:column class="column-couple" >
68
+
69
+ <p:graphicImage value="#{bb.pic}" class="img-find">
70
+
71
+ <f:param name="id" value="#{info.id}"/>
72
+
73
+ </p:graphicImage>
74
+
75
+ </p:column><br/>
76
+
77
+ <div class="name-address-detail">
78
+
79
+ <p:column class="column-couple1">
80
+
81
+ <h:outputText value="#{info.first}" />さん
82
+
83
+ </p:column>
84
+
85
+ <br/>
86
+
87
+ <p:column class="column-couple2">
88
+
89
+ <h:outputText value="#{info.ad}" />
90
+
91
+ </p:column>
92
+
93
+ <br/>
94
+
95
+ <p:column class="column-couple3">
96
+
97
+ <h:commandLink action="#{bb.detail(info.id)}">
98
+
99
+ 詳細へ
100
+
101
+ </h:commandLink>
102
+
103
+ </p:column>
104
+
105
+ </div>
106
+
107
+
108
+
109
+ </p:dataTable>
110
+
111
+ ```
112
+
113
+
114
+
115
+
116
+
59
117
  ![今のデータテーブルです](c18146badef503c99956ca229f020dde.png)
60
118
 
61
119
  これを横一列に並べたいのですがfloatを使ってもうまくいきません。