teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

使用したサイトを追加

2016/09/25 05:17

投稿

ludient
ludient

スコア20

title CHANGED
File without changes
body CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  ---
11
11
 
12
- htmlのマークアップはテーブルジェネレーターを使用して
12
+ htmlのマークアップは[こちらの](https://tabletag.net/ja/)テーブルジェネレーターを使用して
13
13
  生成されたコードにcssで、
14
14
  cellクラスに対して高さを設定しようとしてみましたがうまくいきませんでした。
15
15
 

2

試してみたコードを追加

2016/09/25 05:17

投稿

ludient
ludient

スコア20

title CHANGED
File without changes
body CHANGED
@@ -6,4 +6,55 @@
6
6
 
7
7
  もしtableタグでの実装が適さない場合、tableタグでの実装にはこだわりません。
8
8
 
9
+
10
+ ---
11
+
12
+ htmlのマークアップはテーブルジェネレーターを使用して
13
+ 生成されたコードにcssで、
14
+ cellクラスに対して高さを設定しようとしてみましたがうまくいきませんでした。
15
+
16
+ ```html
17
+ <table>
18
+ <tbody>
19
+ <tr>
20
+ <td rowspan="5"></td>
21
+ <td></td>
22
+ <td></td>
23
+ <td class="cell" rowspan="2"></td>
24
+ </tr>
25
+ <tr>
26
+ <td></td>
27
+ <td></td>
28
+ </tr>
29
+ <tr>
30
+ <td></td>
31
+ <td></td>
32
+ <td class="cell" rowspan="2"></td>
33
+ </tr>
34
+ <tr>
35
+ <td></td>
36
+ <td></td>
37
+ </tr>
38
+ <tr>
39
+ <td></td>
40
+ <td></td>
41
+ <td class="cell"></td>
42
+ </tr>
43
+ </tbody>
44
+ </table>
45
+ ```
46
+
47
+ ```css
48
+ table,th,td {
49
+ border-collapse: collapse;
50
+ border: solid 1px #000;
51
+ }
52
+ .cell {
53
+ height: 150px;
54
+ }
55
+ ```
56
+
57
+
58
+ ---
59
+
9
60
  どなたかお知恵をおかりできれば幸いです。

1

文言の修正

2016/09/25 05:16

投稿

ludient
ludient

スコア20

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,9 @@
1
1
  ![イメージ説明](1353ac3f1aa35de0c4a3393629a0924d.png)
2
2
 
3
- 添付した画像のように、行や列の高さが違うテーブルを、どうマークアップしてどうcssでスタイリングしていいのかがさっぱり分かりません…
3
+ 添付した画像のように、行や列の高さが違うテーブルのようなレイアウトを、どうマークアップしてどうcssでスタイリングしていいのかがさっぱり分かりません…
4
4
  colspanやrowspanを使ってみたのですが、画像のようなレイアウトにはなりませんでした。
5
5
  このような場合、どのように記述するのが一番適切なのでしょうか?
6
6
 
7
- もしテーブルでの実装が適さない場合、テーブルでの実装にはこだわりません。
7
+ もしtableタグでの実装が適さない場合、tableタグでの実装にはこだわりません。
8
8
 
9
9
  どなたかお知恵をおかりできれば幸いです。