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

編集履歴

回答編集履歴

4

CSSをより使いやすいものに改訂

2018/03/25 14:29

投稿

defghi1977
defghi1977

スコア4756

test CHANGED
@@ -72,13 +72,17 @@
72
72
 
73
73
  ```CSS
74
74
 
75
+ /*改訂版*/
76
+
75
77
  table{
76
78
 
77
79
  display: grid;
78
80
 
79
- grid-auto-columns: 1fr;
81
+ grid-auto-flow: column;/*並べる方向(縦)*/
80
82
 
81
- grid-auto-rows: auto;
83
+ grid-auto-columns: 1fr;/*1列の幅*/
84
+
85
+ grid-template-rows: auto auto auto;/*行数とその高さ*/
82
86
 
83
87
  grid-gap: 1px;
84
88
 
@@ -86,65 +90,13 @@
86
90
 
87
91
  tbody, thead, tr{
88
92
 
89
- display: contents;
93
+ display: contents;/*ブロックを生成しない*/
90
94
 
91
95
  }
92
96
 
93
97
  th, td{
94
98
 
95
99
  border:1px black solid;
96
-
97
- }
98
-
99
-
100
-
101
- thead>tr *{
102
-
103
- grid-column: 1;
104
-
105
- }
106
-
107
- tbody>tr:nth-of-type(1) *{
108
-
109
- grid-column: 2;
110
-
111
- }
112
-
113
- tbody>tr:nth-of-type(2) *{
114
-
115
- grid-column: 3;
116
-
117
- }
118
-
119
- tbody>tr:nth-of-type(3) *{
120
-
121
- grid-column: 4;
122
-
123
- }
124
-
125
- tbody>tr:nth-of-type(4) *{
126
-
127
- grid-column: 5;
128
-
129
- }
130
-
131
-
132
-
133
- tr *:nth-of-type(1){
134
-
135
- grid-row: 1;
136
-
137
- }
138
-
139
- tr *:nth-of-type(2){
140
-
141
- grid-row: 2;
142
-
143
- }
144
-
145
- tr *:nth-of-type(3){
146
-
147
- grid-row: 3;
148
100
 
149
101
  }
150
102
 

3

参考文献を追加

2018/03/25 14:29

投稿

defghi1977
defghi1977

スコア4756

test CHANGED
@@ -153,3 +153,9 @@
153
153
  動作サンプル
154
154
 
155
155
  [http://jsdo.it/defghi1977/Izc1](http://jsdo.it/defghi1977/Izc1)
156
+
157
+ 参考
158
+
159
+ [https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)
160
+
161
+ [https://developer.mozilla.org/ja/docs/Web/CSS/display](https://developer.mozilla.org/ja/docs/Web/CSS/display)

2

CSSによる方法を追加

2018/03/25 13:46

投稿

defghi1977
defghi1977

スコア4756

test CHANGED
@@ -29,3 +29,127 @@
29
29
  ---
30
30
 
31
31
  なお元データとなる2次元配列から転置した形の`table`要素を作りたいのであれば, 上のような変換を介さずとも単なる`for`ループで出来るはずです.
32
+
33
+
34
+
35
+ ---
36
+
37
+
38
+
39
+ `table`要素のレイアウトを転置したいのであれば, 一つの方法として**グリッドレイアウト**が挙げられます.グリッドレイアウトを用いれば, 各セルの高さや幅は勝手に揃います.(但し動作環境は限られます)
40
+
41
+
42
+
43
+
44
+
45
+ ```HTML
46
+
47
+ <table>
48
+
49
+ <thead>
50
+
51
+ <tr><th>a1</th><th>a2</th><th>a3</th></tr>
52
+
53
+ </thead>
54
+
55
+ <tbody>
56
+
57
+ <tr><td>a11</td><td>a12</td><td>a13<br/>ああああ</td></tr>
58
+
59
+ <tr><td>a21</td><td>a22<br/>ああああ</td><td>a23</td></tr>
60
+
61
+ <tr><td>a31<br/>ああああ</td><td>a32</td><td>a33</td></tr>
62
+
63
+ <tr><td>a41</td><td>a42<br/>ああああ<br/>ああああ</td><td>a43</td></tr>
64
+
65
+ </tbody>
66
+
67
+ </table>
68
+
69
+ ```
70
+
71
+
72
+
73
+ ```CSS
74
+
75
+ table{
76
+
77
+ display: grid;
78
+
79
+ grid-auto-columns: 1fr;
80
+
81
+ grid-auto-rows: auto;
82
+
83
+ grid-gap: 1px;
84
+
85
+ }
86
+
87
+ tbody, thead, tr{
88
+
89
+ display: contents;
90
+
91
+ }
92
+
93
+ th, td{
94
+
95
+ border:1px black solid;
96
+
97
+ }
98
+
99
+
100
+
101
+ thead>tr *{
102
+
103
+ grid-column: 1;
104
+
105
+ }
106
+
107
+ tbody>tr:nth-of-type(1) *{
108
+
109
+ grid-column: 2;
110
+
111
+ }
112
+
113
+ tbody>tr:nth-of-type(2) *{
114
+
115
+ grid-column: 3;
116
+
117
+ }
118
+
119
+ tbody>tr:nth-of-type(3) *{
120
+
121
+ grid-column: 4;
122
+
123
+ }
124
+
125
+ tbody>tr:nth-of-type(4) *{
126
+
127
+ grid-column: 5;
128
+
129
+ }
130
+
131
+
132
+
133
+ tr *:nth-of-type(1){
134
+
135
+ grid-row: 1;
136
+
137
+ }
138
+
139
+ tr *:nth-of-type(2){
140
+
141
+ grid-row: 2;
142
+
143
+ }
144
+
145
+ tr *:nth-of-type(3){
146
+
147
+ grid-row: 3;
148
+
149
+ }
150
+
151
+ ```
152
+
153
+ 動作サンプル
154
+
155
+ [http://jsdo.it/defghi1977/Izc1](http://jsdo.it/defghi1977/Izc1)

1

コメントを追加

2018/03/25 13:41

投稿

defghi1977
defghi1977

スコア4756

test CHANGED
@@ -23,3 +23,9 @@
23
23
  console.log(transp);
24
24
 
25
25
  ```
26
+
27
+
28
+
29
+ ---
30
+
31
+ なお元データとなる2次元配列から転置した形の`table`要素を作りたいのであれば, 上のような変換を介さずとも単なる`for`ループで出来るはずです.