回答編集履歴
4
CSSをより使いやすいものに改訂
answer
CHANGED
|
@@ -35,44 +35,20 @@
|
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
```CSS
|
|
38
|
+
/*改訂版*/
|
|
38
39
|
table{
|
|
39
40
|
display: grid;
|
|
41
|
+
grid-auto-flow: column;/*並べる方向(縦)*/
|
|
40
|
-
grid-auto-columns: 1fr;
|
|
42
|
+
grid-auto-columns: 1fr;/*1列の幅*/
|
|
41
|
-
grid-
|
|
43
|
+
grid-template-rows: auto auto auto;/*行数とその高さ*/
|
|
42
44
|
grid-gap: 1px;
|
|
43
45
|
}
|
|
44
46
|
tbody, thead, tr{
|
|
45
|
-
display: contents;
|
|
47
|
+
display: contents;/*ブロックを生成しない*/
|
|
46
48
|
}
|
|
47
49
|
th, td{
|
|
48
50
|
border:1px black solid;
|
|
49
51
|
}
|
|
50
|
-
|
|
51
|
-
thead>tr *{
|
|
52
|
-
grid-column: 1;
|
|
53
|
-
}
|
|
54
|
-
tbody>tr:nth-of-type(1) *{
|
|
55
|
-
grid-column: 2;
|
|
56
|
-
}
|
|
57
|
-
tbody>tr:nth-of-type(2) *{
|
|
58
|
-
grid-column: 3;
|
|
59
|
-
}
|
|
60
|
-
tbody>tr:nth-of-type(3) *{
|
|
61
|
-
grid-column: 4;
|
|
62
|
-
}
|
|
63
|
-
tbody>tr:nth-of-type(4) *{
|
|
64
|
-
grid-column: 5;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
tr *:nth-of-type(1){
|
|
68
|
-
grid-row: 1;
|
|
69
|
-
}
|
|
70
|
-
tr *:nth-of-type(2){
|
|
71
|
-
grid-row: 2;
|
|
72
|
-
}
|
|
73
|
-
tr *:nth-of-type(3){
|
|
74
|
-
grid-row: 3;
|
|
75
|
-
}
|
|
76
52
|
```
|
|
77
53
|
動作サンプル
|
|
78
54
|
[http://jsdo.it/defghi1977/Izc1](http://jsdo.it/defghi1977/Izc1)
|
3
参考文献を追加
answer
CHANGED
|
@@ -75,4 +75,7 @@
|
|
|
75
75
|
}
|
|
76
76
|
```
|
|
77
77
|
動作サンプル
|
|
78
|
-
[http://jsdo.it/defghi1977/Izc1](http://jsdo.it/defghi1977/Izc1)
|
|
78
|
+
[http://jsdo.it/defghi1977/Izc1](http://jsdo.it/defghi1977/Izc1)
|
|
79
|
+
参考
|
|
80
|
+
[https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)
|
|
81
|
+
[https://developer.mozilla.org/ja/docs/Web/CSS/display](https://developer.mozilla.org/ja/docs/Web/CSS/display)
|
2
CSSによる方法を追加
answer
CHANGED
|
@@ -13,4 +13,66 @@
|
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
---
|
|
16
|
-
なお元データとなる2次元配列から転置した形の`table`要素を作りたいのであれば, 上のような変換を介さずとも単なる`for`ループで出来るはずです.
|
|
16
|
+
なお元データとなる2次元配列から転置した形の`table`要素を作りたいのであれば, 上のような変換を介さずとも単なる`for`ループで出来るはずです.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
`table`要素のレイアウトを転置したいのであれば, 一つの方法として**グリッドレイアウト**が挙げられます.グリッドレイアウトを用いれば, 各セルの高さや幅は勝手に揃います.(但し動作環境は限られます)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
```HTML
|
|
24
|
+
<table>
|
|
25
|
+
<thead>
|
|
26
|
+
<tr><th>a1</th><th>a2</th><th>a3</th></tr>
|
|
27
|
+
</thead>
|
|
28
|
+
<tbody>
|
|
29
|
+
<tr><td>a11</td><td>a12</td><td>a13<br/>ああああ</td></tr>
|
|
30
|
+
<tr><td>a21</td><td>a22<br/>ああああ</td><td>a23</td></tr>
|
|
31
|
+
<tr><td>a31<br/>ああああ</td><td>a32</td><td>a33</td></tr>
|
|
32
|
+
<tr><td>a41</td><td>a42<br/>ああああ<br/>ああああ</td><td>a43</td></tr>
|
|
33
|
+
</tbody>
|
|
34
|
+
</table>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```CSS
|
|
38
|
+
table{
|
|
39
|
+
display: grid;
|
|
40
|
+
grid-auto-columns: 1fr;
|
|
41
|
+
grid-auto-rows: auto;
|
|
42
|
+
grid-gap: 1px;
|
|
43
|
+
}
|
|
44
|
+
tbody, thead, tr{
|
|
45
|
+
display: contents;
|
|
46
|
+
}
|
|
47
|
+
th, td{
|
|
48
|
+
border:1px black solid;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
thead>tr *{
|
|
52
|
+
grid-column: 1;
|
|
53
|
+
}
|
|
54
|
+
tbody>tr:nth-of-type(1) *{
|
|
55
|
+
grid-column: 2;
|
|
56
|
+
}
|
|
57
|
+
tbody>tr:nth-of-type(2) *{
|
|
58
|
+
grid-column: 3;
|
|
59
|
+
}
|
|
60
|
+
tbody>tr:nth-of-type(3) *{
|
|
61
|
+
grid-column: 4;
|
|
62
|
+
}
|
|
63
|
+
tbody>tr:nth-of-type(4) *{
|
|
64
|
+
grid-column: 5;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
tr *:nth-of-type(1){
|
|
68
|
+
grid-row: 1;
|
|
69
|
+
}
|
|
70
|
+
tr *:nth-of-type(2){
|
|
71
|
+
grid-row: 2;
|
|
72
|
+
}
|
|
73
|
+
tr *:nth-of-type(3){
|
|
74
|
+
grid-row: 3;
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
動作サンプル
|
|
78
|
+
[http://jsdo.it/defghi1977/Izc1](http://jsdo.it/defghi1977/Izc1)
|
1
コメントを追加
answer
CHANGED
|
@@ -10,4 +10,7 @@
|
|
|
10
10
|
return prev;
|
|
11
11
|
}, []);
|
|
12
12
|
console.log(transp);
|
|
13
|
-
```
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
なお元データとなる2次元配列から転置した形の`table`要素を作りたいのであれば, 上のような変換を介さずとも単なる`for`ループで出来るはずです.
|