teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問table要素の行と列をCSSで転置した際の行の高さを揃えたい

編集履歴

質問編集履歴

12

修正

2018/03/25 13:14

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
@@ -1 +1 @@
1
- 【jQuery】複数の配列から各配列のn番目の値を集めた配列を作りたい
1
+ table要素の行と列をCSSで転置した際の行の高さを揃えたい
test CHANGED
@@ -1,100 +1,30 @@
1
- 以下のようなことを実現したいです。
1
+ 【実現したいこと】
2
+
3
+ ---
2
4
 
3
5
 
4
6
 
7
+ ![イメージ説明](6af66b1e87100697b5bf5982fb0b26d7.png)
8
+
5
- 【元の配列】
9
+ 例えば、【現状】の②の項目は青色が最も高さがあるので、他のTD②とTH②も青色の高さに合わせたい。
6
10
 
7
11
 
8
12
 
13
+ ![イメージ説明](dc6ec697149873cbc690fe115d49848c.png)
14
+
9
- 配列①[A,B,C]・配列②[D,E,F]・配列③[G,H,I]
15
+ 横列を最も高さのあるカラムの高さに統一したい。
10
16
 
11
17
 
12
18
 
13
- ↓↓
14
19
 
15
-
16
-
17
- 【元の配列のN番目の値を取得した配列を生成】
18
-
19
-
20
-
21
- 配列④[A,D,G]（元配列の各1番目の要素）
22
-
23
- 配列⑤[B,E,H]（元配列の各2番目の要素）
24
-
25
- 配列⑥[C,F,I]（元配列の各3番目の要素）
26
-
27
-
28
-
29
- 色々と考えを巡らしたのですが、如何ともアイディアが浮かんでこず。。。
30
-
31
-
32
-
33
- 教えて頂けると嬉しいです。。ちなみに元の配列の数・その元の配列の中の値の数はどちらも変動する予定です。
34
-
35
-
36
-
37
- 【最終的に実現したいこと】
38
-
39
- ----
40
20
 
41
21
  以下のような動的に生成されるテーブルの各カラムの高さを最も高いカラムに合わせたい。
42
22
 
43
23
 
44
24
 
45
- ```html
25
+ やったこと
46
26
 
47
- table class="compare-table"
48
-
49
- thead
27
+ ----
50
-
51
- tr
52
-
53
- th class="item" 名前
54
-
55
- th class="item" 出身値
56
-
57
- th class="item" 趣味
58
-
59
- tbody
60
-
61
- tr
62
-
63
- td class="item" マイク
64
-
65
- td class="item" アメリカ
66
-
67
- td class="item" サッカー
68
-
69
- tr
70
-
71
- td class="item" ポール
72
-
73
- td class="item" イギリス
74
-
75
- td class="item" 普段は大食い。たまにショッピングとか。
76
-
77
- tr
78
-
79
- td class="item" ラッシー
80
-
81
- td class="item" バルバトス
82
-
83
- td class="item" 動画撮影
84
-
85
- ```
86
-
87
- ※タグの<>表記は割愛しています。
88
-
89
-
90
-
91
- テーブル自体は一番左列にthが入り、そこから一列ずつtbodyのtrに人数分の列が入ります。
92
-
93
-
94
-
95
- 人毎に各項目が縦に並んでいるのですが、項目毎に高さ（つまり横方向に）を統一したいです。
96
-
97
- その際、同じ項目の中で最も高い人のカラムの高さを取得し、それで合わせるのが理想的。
98
28
 
99
29
 
100
30
 
@@ -102,7 +32,7 @@
102
32
 
103
33
  //列の要素数（tr） を取得
104
34
 
105
- var e = $(".compare-table").find("tr");
35
+ var e = $("table").find("tr");
106
36
 
107
37
  //列の項目数(th)をチェック
108
38
 
@@ -124,7 +54,7 @@
124
54
 
125
55
  $(e).each(function(i){
126
56
 
127
- array[i] = $(this).find(".item:nth-child(" + i + ")").outerHeight();
57
+ array[i] = $(this).find("td:nth-child(" + i + ")").outerHeight();
128
58
 
129
59
 
130
60
 
@@ -143,19 +73,3 @@
143
73
 
144
74
 
145
75
  上記のようなことまでやったのですが、迷路に入っています。。。。
146
-
147
-
148
-
149
- 【再追記】
150
-
151
-
152
-
153
- ![イメージ説明](6af66b1e87100697b5bf5982fb0b26d7.png)
154
-
155
- 例えば、【現状】の②の項目は青色が最も高さがあるので、他のTD②とTH②も青色の高さに合わせたい。
156
-
157
-
158
-
159
- ![イメージ説明](dc6ec697149873cbc690fe115d49848c.png)
160
-
161
- 横列を最も高さのあるカラムの高さに統一したい。

11

追記

2018/03/25 13:14

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -143,3 +143,19 @@
143
143
 
144
144
 
145
145
  上記のようなことまでやったのですが、迷路に入っています。。。。
146
+
147
+
148
+
149
+ 【再追記】
150
+
151
+
152
+
153
+ ![イメージ説明](6af66b1e87100697b5bf5982fb0b26d7.png)
154
+
155
+ 例えば、【現状】の②の項目は青色が最も高さがあるので、他のTD②とTH②も青色の高さに合わせたい。
156
+
157
+
158
+
159
+ ![イメージ説明](dc6ec697149873cbc690fe115d49848c.png)
160
+
161
+ 横列を最も高さのあるカラムの高さに統一したい。

10

修正

2018/03/25 13:01

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -100,9 +100,11 @@
100
100
 
101
101
  ```javascript
102
102
 
103
- var e = $(".compare-table").find("tr");
103
+ //列の要素数（tr） を取得
104
104
 
105
+ var e = $(".compare-table").find("tr");
106
+
105
- //項目数をチェック
107
+ //列の項目数(th)をチェック
106
108
 
107
109
  var count = $(e).first().find("th").length;
108
110
 
@@ -114,11 +116,11 @@
114
116
 
115
117
  $(function(){
116
118
 
117
- 　　　//項目の数だけループ
119
+ 　　　//項目(th)の数だけループ
118
120
 
119
121
  for (var i = 1; (i - 1) < count; i++ ) {
120
122
 
121
- 　　　　// 列の数だけループ
123
+ 　　　　// 列(tr)の数だけループ
122
124
 
123
125
  $(e).each(function(i){
124
126
 

9

修正

2018/03/25 12:29

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -88,7 +88,7 @@
88
88
 
89
89
 
90
90
 
91
- テーブル自体は一番左列にthが入り、そこから一列ずつtbodyのtrに×人数の列が入ります。
91
+ テーブル自体は一番左列にthが入り、そこから一列ずつtbodyのtrに人数分の列が入ります。
92
92
 
93
93
 
94
94
 

8

修正

2018/03/25 12:25

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -122,7 +122,7 @@
122
122
 
123
123
  $(e).each(function(i){
124
124
 
125
- array[i] = $(this).find(".thtd:nth-child(" + i + ")").outerHeight();
125
+ array[i] = $(this).find(".item:nth-child(" + i + ")").outerHeight();
126
126
 
127
127
 
128
128
 

7

修正

2018/03/25 12:24

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```html
46
46
 
47
- table class="conpare-table"
47
+ table class="compare-table"
48
48
 
49
49
  thead
50
50
 

6

追記修正

2018/03/25 12:16

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -35,6 +35,8 @@
35
35
 
36
36
 
37
37
  【最終的に実現したいこと】
38
+
39
+ ----
38
40
 
39
41
  以下のような動的に生成されるテーブルの各カラムの高さを最も高いカラムに合わせたい。
40
42
 

5

追記

2018/03/25 12:16

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -31,3 +31,111 @@
31
31
 
32
32
 
33
33
  教えて頂けると嬉しいです。。ちなみに元の配列の数・その元の配列の中の値の数はどちらも変動する予定です。
34
+
35
+
36
+
37
+ 【最終的に実現したいこと】
38
+
39
+ 以下のような動的に生成されるテーブルの各カラムの高さを最も高いカラムに合わせたい。
40
+
41
+
42
+
43
+ ```html
44
+
45
+ table class="conpare-table"
46
+
47
+ thead
48
+
49
+ tr
50
+
51
+ th class="item" 名前
52
+
53
+ th class="item" 出身値
54
+
55
+ th class="item" 趣味
56
+
57
+ tbody
58
+
59
+ tr
60
+
61
+ td class="item" マイク
62
+
63
+ td class="item" アメリカ
64
+
65
+ td class="item" サッカー
66
+
67
+ tr
68
+
69
+ td class="item" ポール
70
+
71
+ td class="item" イギリス
72
+
73
+ td class="item" 普段は大食い。たまにショッピングとか。
74
+
75
+ tr
76
+
77
+ td class="item" ラッシー
78
+
79
+ td class="item" バルバトス
80
+
81
+ td class="item" 動画撮影
82
+
83
+ ```
84
+
85
+ ※タグの<>表記は割愛しています。
86
+
87
+
88
+
89
+ テーブル自体は一番左列にthが入り、そこから一列ずつtbodyのtrに×人数の列が入ります。
90
+
91
+
92
+
93
+ 人毎に各項目が縦に並んでいるのですが、項目毎に高さ（つまり横方向に）を統一したいです。
94
+
95
+ その際、同じ項目の中で最も高い人のカラムの高さを取得し、それで合わせるのが理想的。
96
+
97
+
98
+
99
+ ```javascript
100
+
101
+ var e = $(".compare-table").find("tr");
102
+
103
+ //項目数をチェック
104
+
105
+ var count = $(e).first().find("th").length;
106
+
107
+ //配列を用意
108
+
109
+ var array = new Array();
110
+
111
+
112
+
113
+ $(function(){
114
+
115
+ 　　　//項目の数だけループ
116
+
117
+ for (var i = 1; (i - 1) < count; i++ ) {
118
+
119
+ 　　　　// 列の数だけループ
120
+
121
+ $(e).each(function(i){
122
+
123
+ array[i] = $(this).find(".thtd:nth-child(" + i + ")").outerHeight();
124
+
125
+
126
+
127
+ // var maxH = Math.max.apply(null,array);
128
+
129
+ // $(e).css({"height": maxH - 16 + "px"});
130
+
131
+ });
132
+
133
+ };
134
+
135
+ });
136
+
137
+ ```
138
+
139
+
140
+
141
+ 上記のようなことまでやったのですが、迷路に入っています。。。。

4

追記

2018/03/25 12:15

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -30,4 +30,4 @@
30
30
 
31
31
 
32
32
 
33
- 教えて頂けると嬉しいです。。ちなみに元の配列の数・配列の中の値の数はどちらも変動する予定です。
33
+ 教えて頂けると嬉しいです。。ちなみに元の配列の数・その元の配列の中の値の数はどちらも変動する予定です。

3

追記

2018/03/25 11:38

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -30,4 +30,4 @@
30
30
 
31
31
 
32
32
 
33
- 教えて頂けると嬉しいです。。ちなみに元の配列数は変動する予定です。
33
+ 教えて頂けると嬉しいです。。ちなみに元の配列の数・配列の中の値の数はどちらも変動する予定です。

2

追記

2018/03/25 11:38

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -30,4 +30,4 @@
30
30
 
31
31
 
32
32
 
33
- 教えて頂けると嬉しいです。。
33
+ 教えて頂けると嬉しいです。。ちなみに元の配列数は変動する予定です。

1

追記

2018/03/25 11:37

投稿

gogoackman3
gogoackman3

スコア109

test CHANGED
File without changes
test CHANGED
@@ -18,11 +18,11 @@
18
18
 
19
19
 
20
20
 
21
- 配列[A,D,G]（元配列の各1番目の要素）
21
+ 配列④[A,D,G]（元配列の各1番目の要素）
22
22
 
23
- 配列[B,E,H]（元配列の各2番目の要素）
23
+ 配列⑤[B,E,H]（元配列の各2番目の要素）
24
24
 
25
- 配列[C,F,I]（元配列の各3番目の要素）
25
+ 配列⑥[C,F,I]（元配列の各3番目の要素）
26
26
 
27
27
 
28
28