table要素の行と列をCSSで転置した際の行の高さを揃えたい

【実現したいこと】

例えば、【現状】の②の項目は青色が最も高さがあるので、他のTD②とTH②も青色の高さに合わせたい。

横列を最も高さのあるカラムの高さに統一したい。

以下のような動的に生成されるテーブルの各カラムの高さを最も高いカラムに合わせたい。

やったこと

javascript
1    //列の要素数（tr） を取得
2    var e = $("table").find("tr");
3    //列の項目数(th)をチェック
4    var count = $(e).first().find("th").length;
5    //配列を用意
6    var array = new Array();
7
8    $(function(){
9　　　//項目(th)の数だけループ
10      for (var i = 1; (i - 1) < count; i++ ) {
11　　　　// 列(tr)の数だけループ
12        $(e).each(function(i){
13          array[i] = $(this).find("td:nth-child(" + i + ")").outerHeight();
14 
15        // var maxH = Math.max.apply(null,array);
16        // $(e).css({"height": maxH - 16 + "px"});
17        });
18      };
19    });

上記のようなことまでやったのですが、迷路に入っています。。。。

think49

2018/03/25 11:56

一般的な繰り返し構文で実現可能だと思いますが、for 文や .each() はご存知ですか。ご自身で書いてみた部分までコードを開示してみてはいかがでしょう。

kei344

2018/03/25 11:57

「配列③」などに3件入っている状況で5番目の要素を取得しようとした場合には結果配列はどうなるのでしょうか。

defghi1977

2018/03/25 12:21

だったら最初からそう書いておきなさいって（後出しジャンケンはやめてほしい）

gogoackman3

2018/03/25 12:23

すみません。teratail側から修正して下さいというアラートがあり、修正させて頂きました。。。時間取って頂いてすみません。

defghi1977

2018/03/25 12:26

文面の配列からどうやってテーブル要素を想像できるのですか？曖昧な質問は回答者側の時間的リソースを浪費させてしまう点をよく噛み締めて下さい.

gogoackman3

2018/03/25 12:26

申し訳ないです。

think49

2018/03/25 12:29 編集

あえてポジティブに受け取るなら、当初の要件はdefghi1977さんの回答で満たしているので、そこから先はgogoackman3さんご自身で解決するつもりだったのかもしれません。だとすれば、ベストアンサーを選んで解決しますね…。

defghi1977

2018/03/25 12:38

質問の追記を見てもまた何をおっしゃっているのかが曖昧です. できれば変換前のtable要素の構造と変換後のtable要素の構造との対比を明確にして下さい.

gogoackman3

2018/03/25 12:41

構造自体を変えたいわけではないんです。各カラムの高さが入っている値（テキストの長さ）によって変わるので、それを項目毎に最も高い高さのカラムに合わせてあげたい（CSSの修正）という意図になります。質問にイメージ画像を追加してみます。

kei344

2018/03/25 12:46

「項目毎に高さ（つまり横方向に）を統一したい」とありますが、まともにtableタグで書けば高さはそろいますが、何をしたいのでしょうか。また、例示するHTMLは省略しないでください。

gogoackman3

2018/03/25 13:05 編集

通常通りTRが横になっていると高さが揃うのではないでしょうか？図にしてみたのですが、TRを縦に使うと、TRの中のTDが横隣のTDと高さは合わないですよね。CSSで高さを指定しない限り文字数に合わせて変化すると思います。ただ、今回はテーブルを生成するデータが動的なので、最初からCSSで高さを固定してしまうと、崩れてしまうんです。。

defghi1977

2018/03/25 13:06

あっはっは、変則テーブルじゃないですか。こりゃ伝わんない筈

defghi1977

2018/03/25 13:09

まず、あなたの質問の題名が紛らわしい. 正確には, 「table要素の行と列をCSSで転置した際の行の高さを揃えたい」ということですね

gogoackman3

2018/03/25 13:10

はいそうです。質問はすみません。

defghi1977

2018/03/25 13:11

ではそのように題名を修正しておきましょう.

gogoackman3

2018/03/25 13:15

修正しておきました

行動規範の内容に同意します

回答2件

ベストアンサー

所謂転置行列を作りたいと？

JavaScript
1const transp = [["A", "B", "C"], ["D", "E", "F"], ["G", "H", "I"], ["J", "K", "L"]]
2.reduce((prev, curr) => {
3	curr.forEach((val, i) => {
4		const arr = prev[i] = prev[i] || [];
5		arr.push(val);
6	});
7	return prev;
8}, []);
9console.log(transp);

なお元データとなる2次元配列から転置した形のtable要素を作りたいのであれば, 上のような変換を介さずとも単なるforループで出来るはずです.

table要素のレイアウトを転置したいのであれば, 一つの方法としてグリッドレイアウトが挙げられます.グリッドレイアウトを用いれば, 各セルの高さや幅は勝手に揃います.(但し動作環境は限られます)

HTML
1<table>
2<thead>
3<tr><th>a1</th><th>a2</th><th>a3</th></tr>
4</thead>
5<tbody>
6<tr><td>a11</td><td>a12</td><td>a13<br/>ああああ</td></tr>
7<tr><td>a21</td><td>a22<br/>ああああ</td><td>a23</td></tr>
8<tr><td>a31<br/>ああああ</td><td>a32</td><td>a33</td></tr>
9<tr><td>a41</td><td>a42<br/>ああああ<br/>ああああ</td><td>a43</td></tr>
10</tbody>
11</table>

CSS
1/*改訂版*/
2table{
3	display: grid;
4	grid-auto-flow: column;/*並べる方向(縦)*/
5	grid-auto-columns: 1fr;/*1列の幅*/
6	grid-template-rows: auto auto auto;/*行数とその高さ*/
7	grid-gap: 1px;
8}
9tbody, thead, tr{
10	display: contents;/*ブロックを生成しない*/
11}
12th, td{
13	border:1px black solid;
14}