回答編集履歴
2
追記再び
answer
CHANGED
|
@@ -113,4 +113,70 @@
|
|
|
113
113
|
|
|
114
114
|
サンプル画像のように三項目の間にスペースを入れる場合。
|
|
115
115
|
`tbody tr:not(:last-of-type) td:last-child`を`tbody tr td:last-child`に変更して、
|
|
116
|
-
中身を`margin-bottom:10px;`などとしてください。
|
|
116
|
+
中身を`margin-bottom:10px;`などとしてください。
|
|
117
|
+
|
|
118
|
+
追記2：
|
|
119
|
+
|
|
120
|
+
HTMLは`<thead>`の`<th>`内と`<tbody>`の`<th>`内が変更点です。
|
|
121
|
+
CSSは`tbody th{}`内に以下の1行を追加。
|
|
122
|
+
`tbody th::after{}`はそのまま追加します。
|
|
123
|
+
要するにレイヤーで上書きって感じになります。
|
|
124
|
+
HTMLのソース上構造は間違っていないので、問題ないと思いますが、
|
|
125
|
+
やっちゃだめなことだとご存知の方はコメントください。
|
|
126
|
+
|
|
127
|
+
```HTML
|
|
128
|
+
<body>
|
|
129
|
+
<div class="container">
|
|
130
|
+
<table>
|
|
131
|
+
<thead>
|
|
132
|
+
<tr>
|
|
133
|
+
<th> </th>
|
|
134
|
+
<th>C1</th>
|
|
135
|
+
<th>C2</th>
|
|
136
|
+
<th>C3</th>
|
|
137
|
+
</tr>
|
|
138
|
+
</thead>
|
|
139
|
+
<tbody>
|
|
140
|
+
<tr>
|
|
141
|
+
<th data-label="C1">30min</th>
|
|
142
|
+
<td data-label="30min">100</td>
|
|
143
|
+
<td data-label="45min">200</td>
|
|
144
|
+
<td data-label="60min">300</td>
|
|
145
|
+
</tr>
|
|
146
|
+
<tr>
|
|
147
|
+
<th data-label="C2">45min</th>
|
|
148
|
+
<td data-label="30min">200</td>
|
|
149
|
+
<td data-label="45min">300</td>
|
|
150
|
+
<td data-label="60min">400</td>
|
|
151
|
+
</tr>
|
|
152
|
+
<tr>
|
|
153
|
+
<th data-label="C3">60min</th>
|
|
154
|
+
<td data-label="30min">300</td>
|
|
155
|
+
<td data-label="45min">400</td>
|
|
156
|
+
<td data-label="60min">500</td>
|
|
157
|
+
</tr>
|
|
158
|
+
</tbody>
|
|
159
|
+
</table>
|
|
160
|
+
</div>
|
|
161
|
+
</body>
|
|
162
|
+
```
|
|
163
|
+
```CSS
|
|
164
|
+
@media only screen and (max-width:480px) {
|
|
165
|
+
tbody th {
|
|
166
|
+
position:relative;
|
|
167
|
+
}
|
|
168
|
+
tbody th::after {
|
|
169
|
+
z-index:10;
|
|
170
|
+
position:absolute;
|
|
171
|
+
left:0;
|
|
172
|
+
top:0;
|
|
173
|
+
display:flex;
|
|
174
|
+
justify-content:center;
|
|
175
|
+
align-items:center;
|
|
176
|
+
background-color:#ff0;
|
|
177
|
+
width:100%;
|
|
178
|
+
height:100%;
|
|
179
|
+
content:attr(data-label);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
```
|
1
追記です。
answer
CHANGED
|
@@ -107,4 +107,10 @@
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
```
|
|
110
|
-
不明点あればご質問ください。
|
|
110
|
+
不明点あればご質問ください。
|
|
111
|
+
|
|
112
|
+
追記：
|
|
113
|
+
|
|
114
|
+
サンプル画像のように三項目の間にスペースを入れる場合。
|
|
115
|
+
`tbody tr:not(:last-of-type) td:last-child`を`tbody tr td:last-child`に変更して、
|
|
116
|
+
中身を`margin-bottom:10px;`などとしてください。
|