teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問画像のようなtableのレイアウトは実装可能ですか？

編集履歴

質問編集履歴

2

「追記」の記述ミスを修正しました。

2021/07/30 12:27

投稿

hebochans
hebochans

スコア35

test CHANGED
File without changes
test CHANGED
@@ -98,13 +98,13 @@
98
98
 
99
99
  <tr>
100
100
 
101
- <th style="background-color: #FAFAFA; text-align: center;">テキスト</th>
101
+ <th>テキスト</th>
102
102
 
103
103
  </tr>
104
104
 
105
105
  <tr>
106
106
 
107
- <td style="text-align: center;">画像</td>
107
+ <td><img src="" alt="" /></td>
108
108
 
109
109
  </tr>
110
110
 
@@ -114,13 +114,13 @@
114
114
 
115
115
  <tr>
116
116
 
117
- <th style="background-color: #FAFAFA; text-align: center;">テキスト</th>
117
+ <th>テキスト</th>
118
118
 
119
119
  </tr>
120
120
 
121
121
  <tr>
122
122
 
123
- <td style="text-align: center;">画像</td>
123
+ <td><img src="" alt="" /></td>
124
124
 
125
125
  </tr>
126
126
 

1

「ご回答いただいてからの追記」以降を追記しました。

2021/07/30 12:27

投稿

hebochans
hebochans

スコア35

test CHANGED
File without changes
test CHANGED
@@ -79,3 +79,69 @@
79
79
  }
80
80
 
81
81
  ```
82
+
83
+
84
+
85
+ ### ご回答いただいてからの追記
86
+
87
+
88
+
89
+ 以下の方法で実装できました！
90
+
91
+
92
+
93
+ ```html
94
+
95
+ <table>
96
+
97
+ <thead class="test">
98
+
99
+ <tr>
100
+
101
+ <th style="background-color: #FAFAFA; text-align: center;">テキスト</th>
102
+
103
+ </tr>
104
+
105
+ <tr>
106
+
107
+ <td style="text-align: center;">画像</td>
108
+
109
+ </tr>
110
+
111
+ </thead>
112
+
113
+ <tbody class="test">
114
+
115
+ <tr>
116
+
117
+ <th style="background-color: #FAFAFA; text-align: center;">テキスト</th>
118
+
119
+ </tr>
120
+
121
+ <tr>
122
+
123
+ <td style="text-align: center;">画像</td>
124
+
125
+ </tr>
126
+
127
+ </tbody>
128
+
129
+ </table>
130
+
131
+ ```
132
+
133
+
134
+
135
+ ```css
136
+
137
+ @media screen and (min-width: 768px) {
138
+
139
+ .test {
140
+
141
+ display: table-cell;
142
+
143
+ }
144
+
145
+ }
146
+
147
+ ```