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

編集履歴

質問編集履歴

12

修正

2018/03/25 13:14

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
@@ -1,1 +1,1 @@
1
- 【jQuery】複数の配列から各配列のn番目の値を集めた配列を作りたい
1
+ table要素の行と列をCSSで転置した際の行の高さを揃えたい
body CHANGED
@@ -1,56 +1,21 @@
1
- 以下のようなことを実現したいです。
1
+ 【実現したいこと】
2
+ ---
2
3
 
4
+ ![イメージ説明](6af66b1e87100697b5bf5982fb0b26d7.png)
3
- 【元の配列】
5
+ 例えば、【現状】の②の項目は青色が最も高さがあるので、他のTD②とTH②も青色の高さに合わせたい。
4
6
 
7
+ ![イメージ説明](dc6ec697149873cbc690fe115d49848c.png)
5
- 配列①[A,B,C]・配列②[D,E,F]・配列③[G,H,I]
8
+ 横列を最も高さのあるカラムの高さに統一したい。
6
9
 
7
- ↓↓
8
10
 
9
- 【元の配列のN番目の値を取得した配列を生成】
11
+ 以下のような動的に生成されるテーブルの各カラムの高さを最も高いカラムに合わせたい。
10
12
 
11
- 配列④[A,D,G]（元配列の各1番目の要素）
12
- 配列⑤[B,E,H]（元配列の各2番目の要素）
13
- 配列⑥[C,F,I]（元配列の各3番目の要素）
14
-
15
- 色々と考えを巡らしたのですが、如何ともアイディアが浮かんでこず。。。
16
-
17
- 教えて頂けると嬉しいです。。ちなみに元の配列の数・その元の配列の中の値の数はどちらも変動する予定です。
18
-
19
- 【最終的に実現したいこと】
13
+ やったこと
20
14
  ----
21
- 以下のような動的に生成されるテーブルの各カラムの高さを最も高いカラムに合わせたい。
22
15
 
23
- ```html
24
- table class="compare-table"
25
- thead
26
- tr
27
- th class="item" 名前
28
- th class="item" 出身値
29
- th class="item" 趣味
30
- tbody
31
- tr
32
- td class="item" マイク
33
- td class="item" アメリカ
34
- td class="item" サッカー
35
- tr
36
- td class="item" ポール
37
- td class="item" イギリス
38
- td class="item" 普段は大食い。たまにショッピングとか。
39
- tr
40
- td class="item" ラッシー
41
- td class="item" バルバトス
42
- td class="item" 動画撮影
43
- ```
44
- ※タグの<>表記は割愛しています。
45
-
46
- テーブル自体は一番左列にthが入り、そこから一列ずつtbodyのtrに人数分の列が入ります。
47
-
48
- 人毎に各項目が縦に並んでいるのですが、項目毎に高さ（つまり横方向に）を統一したいです。
49
- その際、同じ項目の中で最も高い人のカラムの高さを取得し、それで合わせるのが理想的。
50
-
51
16
  ```javascript
52
17
  //列の要素数（tr） を取得
53
- var e = $(".compare-table").find("tr");
18
+ var e = $("table").find("tr");
54
19
  //列の項目数(th)をチェック
55
20
  var count = $(e).first().find("th").length;
56
21
  //配列を用意
@@ -61,7 +26,7 @@
61
26
  for (var i = 1; (i - 1) < count; i++ ) {
62
27
  　　　　// 列(tr)の数だけループ
63
28
  $(e).each(function(i){
64
- array[i] = $(this).find(".item:nth-child(" + i + ")").outerHeight();
29
+ array[i] = $(this).find("td:nth-child(" + i + ")").outerHeight();
65
30
 
66
31
  // var maxH = Math.max.apply(null,array);
67
32
  // $(e).css({"height": maxH - 16 + "px"});
@@ -70,12 +35,4 @@
70
35
  });
71
36
  ```
72
37
 
73
- 上記のようなことまでやったのですが、迷路に入っています。。。。
38
+ 上記のようなことまでやったのですが、迷路に入っています。。。。
74
-
75
- 【再追記】
76
-
77
- ![イメージ説明](6af66b1e87100697b5bf5982fb0b26d7.png)
78
- 例えば、【現状】の②の項目は青色が最も高さがあるので、他のTD②とTH②も青色の高さに合わせたい。
79
-
80
- ![イメージ説明](dc6ec697149873cbc690fe115d49848c.png)
81
- 横列を最も高さのあるカラムの高さに統一したい。

11

追記

2018/03/25 13:14

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -70,4 +70,12 @@
70
70
  });
71
71
  ```
72
72
 
73
- 上記のようなことまでやったのですが、迷路に入っています。。。。
73
+ 上記のようなことまでやったのですが、迷路に入っています。。。。
74
+
75
+ 【再追記】
76
+
77
+ ![イメージ説明](6af66b1e87100697b5bf5982fb0b26d7.png)
78
+ 例えば、【現状】の②の項目は青色が最も高さがあるので、他のTD②とTH②も青色の高さに合わせたい。
79
+
80
+ ![イメージ説明](dc6ec697149873cbc690fe115d49848c.png)
81
+ 横列を最も高さのあるカラムの高さに統一したい。

10

修正

2018/03/25 13:01

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -49,16 +49,17 @@
49
49
  その際、同じ項目の中で最も高い人のカラムの高さを取得し、それで合わせるのが理想的。
50
50
 
51
51
  ```javascript
52
+ //列の要素数（tr） を取得
52
- var e = $(".compare-table").find("tr");
53
+ var e = $(".compare-table").find("tr");
53
- //項目数をチェック
54
+ //列の項目数(th)をチェック
54
55
  var count = $(e).first().find("th").length;
55
56
  //配列を用意
56
57
  var array = new Array();
57
58
 
58
59
  $(function(){
59
- 　　　//項目の数だけループ
60
+ 　　　//項目(th)の数だけループ
60
61
  for (var i = 1; (i - 1) < count; i++ ) {
61
- 　　　　// 列の数だけループ
62
+ 　　　　// 列(tr)の数だけループ
62
63
  $(e).each(function(i){
63
64
  array[i] = $(this).find(".item:nth-child(" + i + ")").outerHeight();
64
65
 

9

修正

2018/03/25 12:29

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -43,7 +43,7 @@
43
43
  ```
44
44
  ※タグの<>表記は割愛しています。
45
45
 
46
- テーブル自体は一番左列にthが入り、そこから一列ずつtbodyのtrに×人数の列が入ります。
46
+ テーブル自体は一番左列にthが入り、そこから一列ずつtbodyのtrに人数分の列が入ります。
47
47
 
48
48
  人毎に各項目が縦に並んでいるのですが、項目毎に高さ（つまり横方向に）を統一したいです。
49
49
  その際、同じ項目の中で最も高い人のカラムの高さを取得し、それで合わせるのが理想的。

8

修正

2018/03/25 12:25

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -60,7 +60,7 @@
60
60
  for (var i = 1; (i - 1) < count; i++ ) {
61
61
  　　　　// 列の数だけループ
62
62
  $(e).each(function(i){
63
- array[i] = $(this).find(".thtd:nth-child(" + i + ")").outerHeight();
63
+ array[i] = $(this).find(".item:nth-child(" + i + ")").outerHeight();
64
64
 
65
65
  // var maxH = Math.max.apply(null,array);
66
66
  // $(e).css({"height": maxH - 16 + "px"});

7

修正

2018/03/25 12:24

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -21,7 +21,7 @@
21
21
  以下のような動的に生成されるテーブルの各カラムの高さを最も高いカラムに合わせたい。
22
22
 
23
23
  ```html
24
- table class="conpare-table"
24
+ table class="compare-table"
25
25
  thead
26
26
  tr
27
27
  th class="item" 名前

6

追記修正

2018/03/25 12:16

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -17,6 +17,7 @@
17
17
  教えて頂けると嬉しいです。。ちなみに元の配列の数・その元の配列の中の値の数はどちらも変動する予定です。
18
18
 
19
19
  【最終的に実現したいこと】
20
+ ----
20
21
  以下のような動的に生成されるテーブルの各カラムの高さを最も高いカラムに合わせたい。
21
22
 
22
23
  ```html

5

追記

2018/03/25 12:16

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -14,4 +14,58 @@
14
14
 
15
15
  色々と考えを巡らしたのですが、如何ともアイディアが浮かんでこず。。。
16
16
 
17
- 教えて頂けると嬉しいです。。ちなみに元の配列の数・その元の配列の中の値の数はどちらも変動する予定です。
17
+ 教えて頂けると嬉しいです。。ちなみに元の配列の数・その元の配列の中の値の数はどちらも変動する予定です。
18
+
19
+ 【最終的に実現したいこと】
20
+ 以下のような動的に生成されるテーブルの各カラムの高さを最も高いカラムに合わせたい。
21
+
22
+ ```html
23
+ table class="conpare-table"
24
+ thead
25
+ tr
26
+ th class="item" 名前
27
+ th class="item" 出身値
28
+ th class="item" 趣味
29
+ tbody
30
+ tr
31
+ td class="item" マイク
32
+ td class="item" アメリカ
33
+ td class="item" サッカー
34
+ tr
35
+ td class="item" ポール
36
+ td class="item" イギリス
37
+ td class="item" 普段は大食い。たまにショッピングとか。
38
+ tr
39
+ td class="item" ラッシー
40
+ td class="item" バルバトス
41
+ td class="item" 動画撮影
42
+ ```
43
+ ※タグの<>表記は割愛しています。
44
+
45
+ テーブル自体は一番左列にthが入り、そこから一列ずつtbodyのtrに×人数の列が入ります。
46
+
47
+ 人毎に各項目が縦に並んでいるのですが、項目毎に高さ（つまり横方向に）を統一したいです。
48
+ その際、同じ項目の中で最も高い人のカラムの高さを取得し、それで合わせるのが理想的。
49
+
50
+ ```javascript
51
+ var e = $(".compare-table").find("tr");
52
+ //項目数をチェック
53
+ var count = $(e).first().find("th").length;
54
+ //配列を用意
55
+ var array = new Array();
56
+
57
+ $(function(){
58
+ 　　　//項目の数だけループ
59
+ for (var i = 1; (i - 1) < count; i++ ) {
60
+ 　　　　// 列の数だけループ
61
+ $(e).each(function(i){
62
+ array[i] = $(this).find(".thtd:nth-child(" + i + ")").outerHeight();
63
+
64
+ // var maxH = Math.max.apply(null,array);
65
+ // $(e).css({"height": maxH - 16 + "px"});
66
+ });
67
+ };
68
+ });
69
+ ```
70
+
71
+ 上記のようなことまでやったのですが、迷路に入っています。。。。

4

追記

2018/03/25 12:15

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -14,4 +14,4 @@
14
14
 
15
15
  色々と考えを巡らしたのですが、如何ともアイディアが浮かんでこず。。。
16
16
 
17
- 教えて頂けると嬉しいです。。ちなみに元の配列の数・配列の中の値の数はどちらも変動する予定です。
17
+ 教えて頂けると嬉しいです。。ちなみに元の配列の数・その元の配列の中の値の数はどちらも変動する予定です。

3

追記

2018/03/25 11:38

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -14,4 +14,4 @@
14
14
 
15
15
  色々と考えを巡らしたのですが、如何ともアイディアが浮かんでこず。。。
16
16
 
17
- 教えて頂けると嬉しいです。。ちなみに元の配列数は変動する予定です。
17
+ 教えて頂けると嬉しいです。。ちなみに元の配列の数・配列の中の値の数はどちらも変動する予定です。

2

追記

2018/03/25 11:38

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -14,4 +14,4 @@
14
14
 
15
15
  色々と考えを巡らしたのですが、如何ともアイディアが浮かんでこず。。。
16
16
 
17
- 教えて頂けると嬉しいです。。
17
+ 教えて頂けると嬉しいです。。ちなみに元の配列数は変動する予定です。

1

追記

2018/03/25 11:37

投稿

gogoackman3
gogoackman3

スコア109

title CHANGED
File without changes
body CHANGED
@@ -8,9 +8,9 @@
8
8
 
9
9
  【元の配列のN番目の値を取得した配列を生成】
10
10
 
11
- 配列[A,D,G]（元配列の各1番目の要素）
11
+ 配列④[A,D,G]（元配列の各1番目の要素）
12
- 配列[B,E,H]（元配列の各2番目の要素）
12
+ 配列⑤[B,E,H]（元配列の各2番目の要素）
13
- 配列[C,F,I]（元配列の各3番目の要素）
13
+ 配列⑥[C,F,I]（元配列の各3番目の要素）
14
14
 
15
15
  色々と考えを巡らしたのですが、如何ともアイディアが浮かんでこず。。。
16
16