質問編集履歴

3

使用したサイトを追加

2016/09/25 05:17

投稿

ludient
ludient

スコア20

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- htmlのマークアップはテーブルジェネレーターを使用して
23
+ htmlのマークアップは[こちらの](https://tabletag.net/ja/)テーブルジェネレーターを使用して
24
24
 
25
25
  生成されたコードにcssで、
26
26
 

2

試してみたコードを追加

2016/09/25 05:17

投稿

ludient
ludient

スコア20

test CHANGED
File without changes
test CHANGED
@@ -14,4 +14,106 @@
14
14
 
15
15
 
16
16
 
17
+
18
+
19
+ ---
20
+
21
+
22
+
23
+ htmlのマークアップはテーブルジェネレーターを使用して
24
+
25
+ 生成されたコードにcssで、
26
+
27
+ cellクラスに対して高さを設定しようとしてみましたがうまくいきませんでした。
28
+
29
+
30
+
31
+ ```html
32
+
33
+ <table>
34
+
35
+ <tbody>
36
+
37
+ <tr>
38
+
39
+ <td rowspan="5"></td>
40
+
41
+ <td></td>
42
+
43
+ <td></td>
44
+
45
+ <td class="cell" rowspan="2"></td>
46
+
47
+ </tr>
48
+
49
+ <tr>
50
+
51
+ <td></td>
52
+
53
+ <td></td>
54
+
55
+ </tr>
56
+
57
+ <tr>
58
+
59
+ <td></td>
60
+
61
+ <td></td>
62
+
63
+ <td class="cell" rowspan="2"></td>
64
+
65
+ </tr>
66
+
67
+ <tr>
68
+
69
+ <td></td>
70
+
71
+ <td></td>
72
+
73
+ </tr>
74
+
75
+ <tr>
76
+
77
+ <td></td>
78
+
79
+ <td></td>
80
+
81
+ <td class="cell"></td>
82
+
83
+ </tr>
84
+
85
+ </tbody>
86
+
87
+ </table>
88
+
89
+ ```
90
+
91
+
92
+
93
+ ```css
94
+
95
+ table,th,td {
96
+
97
+ border-collapse: collapse;
98
+
99
+ border: solid 1px #000;
100
+
101
+ }
102
+
103
+ .cell {
104
+
105
+ height: 150px;
106
+
107
+ }
108
+
109
+ ```
110
+
111
+
112
+
113
+
114
+
115
+ ---
116
+
117
+
118
+
17
119
  どなたかお知恵をおかりできれば幸いです。

1

文言の修正

2016/09/25 05:16

投稿

ludient
ludient

スコア20

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 添付した画像のように、行や列の高さが違うテーブルを、どうマークアップしてどうcssでスタイリングしていいのかがさっぱり分かりません…
5
+ 添付した画像のように、行や列の高さが違うテーブルのようなレイアウトを、どうマークアップしてどうcssでスタイリングしていいのかがさっぱり分かりません…
6
6
 
7
7
  colspanやrowspanを使ってみたのですが、画像のようなレイアウトにはなりませんでした。
8
8
 
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- もしテーブルでの実装が適さない場合、テーブルでの実装にはこだわりません。
13
+ もしtableタグでの実装が適さない場合、tableタグでの実装にはこだわりません。
14
14
 
15
15
 
16
16