teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップに関する質問th要素に縦線の付け方

編集履歴

質問編集履歴

9

修正

2018/08/25 12:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -196,194 +196,6 @@
196
196
 
197
197
 
198
198
 
199
- 下記、reset.css
200
-
201
-
202
-
203
- ```css
204
-
205
- /**
206
-
207
- * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
208
-
209
- * Richard Clark (http://richclarkdesign.com)
210
-
211
- * http://cssreset.com
212
-
213
- */
214
-
215
- html, body, div, span, object, iframe,
216
-
217
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
218
-
219
- abbr, address, cite, code,
220
-
221
- del, dfn, em, img, ins, kbd, q, samp,
222
-
223
- small, strong, sub, sup, var,
224
-
225
- b, i,
226
-
227
- dl, dt, dd, ol, ul, li,
228
-
229
- fieldset, form, label, legend,
230
-
231
- table, caption, tbody, tfoot, thead, tr, th, td,
232
-
233
- article, aside, canvas, details, figcaption, figure,
234
-
235
- footer, header, hgroup, menu, nav, section, summary,
236
-
237
- time, mark, audio, video {
238
-
239
- margin:0;
240
-
241
- padding:0;
242
-
243
- border:0;
244
-
245
- outline:0;
246
-
247
- font-size:100%;
248
-
249
- vertical-align:baseline;
250
-
251
- background:transparent;
252
-
253
- }
254
-
255
- body {
256
-
257
- line-height:1;
258
-
259
- }
260
-
261
- article,aside,details,figcaption,figure,
262
-
263
- footer,header,hgroup,menu,nav,section {
264
-
265
- display:block;
266
-
267
- }
268
-
269
- nav ul {
270
-
271
- list-style:none;
272
-
273
- }
274
-
275
- blockquote, q {
276
-
277
- quotes:none;
278
-
279
- }
280
-
281
- blockquote:before, blockquote:after,
282
-
283
- q:before, q:after {
284
-
285
- content:'';
286
-
287
- content:none;
288
-
289
- }
290
-
291
- a {
292
-
293
- margin:0;
294
-
295
- padding:0;
296
-
297
- font-size:100%;
298
-
299
- vertical-align:baseline;
300
-
301
- background:transparent;
302
-
303
- }
304
-
305
- /* change colours to suit your needs */
306
-
307
- ins {
308
-
309
- background-color:#ff9;
310
-
311
- color:#000;
312
-
313
- text-decoration:none;
314
-
315
- }
316
-
317
- /* change colours to suit your needs */
318
-
319
- mark {
320
-
321
- background-color:#ff9;
322
-
323
- color:#000;
324
-
325
- font-style:italic;
326
-
327
- font-weight:bold;
328
-
329
- }
330
-
331
- del {
332
-
333
- text-decoration: line-through;
334
-
335
- }
336
-
337
- abbr[title], dfn[title] {
338
-
339
- border-bottom:1px dotted;
340
-
341
- cursor:help;
342
-
343
- }
344
-
345
- table {
346
-
347
- border-collapse:collapse;
348
-
349
- border-spacing:0;
350
-
351
- }
352
-
353
- /* change border colour to suit your needs */
354
-
355
- hr {
356
-
357
- display:block;
358
-
359
- height:1px;
360
-
361
- border:0;
362
-
363
- border-top:1px solid #cccccc;
364
-
365
- margin:1em 0;
366
-
367
- padding:0;
368
-
369
- }
370
-
371
- input, select {
372
-
373
- vertical-align:middle;
374
-
375
- }
376
-
377
-
378
-
379
- ```
380
-
381
-
382
-
383
-
384
-
385
-
386
-
387
199
  ![イメージ説明](2d02414a0fd2b2b4932c33b57b47111e.png)
388
200
 
389
201
 

8

アイコン

2018/08/25 12:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -148,7 +148,7 @@
148
148
 
149
149
 
150
150
 
151
- .info1, .info2, .info3 .info4, .detail {
151
+ .info1, .info2, .info3, .info4, .detail {
152
152
 
153
153
  font-size: 18px;
154
154
 

7

修正

2018/08/25 12:38

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ![イメージ説明](2d02414a0fd2b2b4932c33b57b47111e.png)### 前提・実現したいこと
1
+ ### 前提・実現したいこと
2
2
 
3
3
 
4
4
 
@@ -194,6 +194,12 @@
194
194
 
195
195
 
196
196
 
197
+
198
+
199
+ 下記、reset.css
200
+
201
+
202
+
197
203
  ```css
198
204
 
199
205
  /**
@@ -372,12 +378,26 @@
372
378
 
373
379
  ```
374
380
 
381
+
382
+
383
+
384
+
385
+
386
+
387
+ ![イメージ説明](2d02414a0fd2b2b4932c33b57b47111e.png)
388
+
389
+
390
+
391
+
392
+
375
393
  ### 試したこと
376
394
 
377
395
 
378
396
 
379
397
 
380
398
 
399
+
400
+
381
401
  ### 補足情報（FW/ツールのバージョンなど）
382
402
 
383
403
  google chrome 67.0.3396.99

6

css

2018/08/25 11:46

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -194,6 +194,184 @@
194
194
 
195
195
 
196
196
 
197
+ ```css
198
+
199
+ /**
200
+
201
+ * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
202
+
203
+ * Richard Clark (http://richclarkdesign.com)
204
+
205
+ * http://cssreset.com
206
+
207
+ */
208
+
209
+ html, body, div, span, object, iframe,
210
+
211
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
212
+
213
+ abbr, address, cite, code,
214
+
215
+ del, dfn, em, img, ins, kbd, q, samp,
216
+
217
+ small, strong, sub, sup, var,
218
+
219
+ b, i,
220
+
221
+ dl, dt, dd, ol, ul, li,
222
+
223
+ fieldset, form, label, legend,
224
+
225
+ table, caption, tbody, tfoot, thead, tr, th, td,
226
+
227
+ article, aside, canvas, details, figcaption, figure,
228
+
229
+ footer, header, hgroup, menu, nav, section, summary,
230
+
231
+ time, mark, audio, video {
232
+
233
+ margin:0;
234
+
235
+ padding:0;
236
+
237
+ border:0;
238
+
239
+ outline:0;
240
+
241
+ font-size:100%;
242
+
243
+ vertical-align:baseline;
244
+
245
+ background:transparent;
246
+
247
+ }
248
+
249
+ body {
250
+
251
+ line-height:1;
252
+
253
+ }
254
+
255
+ article,aside,details,figcaption,figure,
256
+
257
+ footer,header,hgroup,menu,nav,section {
258
+
259
+ display:block;
260
+
261
+ }
262
+
263
+ nav ul {
264
+
265
+ list-style:none;
266
+
267
+ }
268
+
269
+ blockquote, q {
270
+
271
+ quotes:none;
272
+
273
+ }
274
+
275
+ blockquote:before, blockquote:after,
276
+
277
+ q:before, q:after {
278
+
279
+ content:'';
280
+
281
+ content:none;
282
+
283
+ }
284
+
285
+ a {
286
+
287
+ margin:0;
288
+
289
+ padding:0;
290
+
291
+ font-size:100%;
292
+
293
+ vertical-align:baseline;
294
+
295
+ background:transparent;
296
+
297
+ }
298
+
299
+ /* change colours to suit your needs */
300
+
301
+ ins {
302
+
303
+ background-color:#ff9;
304
+
305
+ color:#000;
306
+
307
+ text-decoration:none;
308
+
309
+ }
310
+
311
+ /* change colours to suit your needs */
312
+
313
+ mark {
314
+
315
+ background-color:#ff9;
316
+
317
+ color:#000;
318
+
319
+ font-style:italic;
320
+
321
+ font-weight:bold;
322
+
323
+ }
324
+
325
+ del {
326
+
327
+ text-decoration: line-through;
328
+
329
+ }
330
+
331
+ abbr[title], dfn[title] {
332
+
333
+ border-bottom:1px dotted;
334
+
335
+ cursor:help;
336
+
337
+ }
338
+
339
+ table {
340
+
341
+ border-collapse:collapse;
342
+
343
+ border-spacing:0;
344
+
345
+ }
346
+
347
+ /* change border colour to suit your needs */
348
+
349
+ hr {
350
+
351
+ display:block;
352
+
353
+ height:1px;
354
+
355
+ border:0;
356
+
357
+ border-top:1px solid #cccccc;
358
+
359
+ margin:1em 0;
360
+
361
+ padding:0;
362
+
363
+ }
364
+
365
+ input, select {
366
+
367
+ vertical-align:middle;
368
+
369
+ }
370
+
371
+
372
+
373
+ ```
374
+
197
375
  ### 試したこと
198
376
 
199
377
 

5

画像

2018/08/25 10:37

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ### 前提・実現したいこと
1
+ ![イメージ説明](2d02414a0fd2b2b4932c33b57b47111e.png)### 前提・実現したいこと
2
2
 
3
3
 
4
4
 

4

補足情報

2018/08/25 10:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -201,3 +201,7 @@
201
201
 
202
202
 
203
203
  ### 補足情報（FW/ツールのバージョンなど）
204
+
205
+ google chrome 67.0.3396.99
206
+
207
+ Mac10.13.6

3

修正中

2018/08/25 10:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -24,6 +24,80 @@
24
24
 
25
25
  ```html
26
26
 
27
+ <!DOCTYPE html>
28
+
29
+ <html lang="ja">
30
+
31
+ <head>
32
+
33
+ <meta charset="utf-8">
34
+
35
+ <link rel="stylesheet" type="text/css" href="./css/reset.css">
36
+
37
+ <link rel="stylesheet" type="text/css" href="./css/test.css">
38
+
39
+ </head>
40
+
41
+ <body>
42
+
43
+ <main class="main">
44
+
45
+ <div class="main_container">
46
+
47
+ <div class="shop">
48
+
49
+ <div class="shop_info clearfix">
50
+
51
+ <table class="information">
52
+
53
+ <caption>caption</caption>
54
+
55
+ <tr>
56
+
57
+ <th class="info1">info</th>
58
+
59
+ <td class="detail">detail</td>
60
+
61
+ </tr>
62
+
63
+ <tr>
64
+
65
+ <th class="info2">info</th>
66
+
67
+ <td class="detail">detail</td>
68
+
69
+ </tr>
70
+
71
+ <tr>
72
+
73
+ <th class="info3">info</th>
74
+
75
+ <td class="detail">detail</td>
76
+
77
+ </tr>
78
+
79
+ <tr>
80
+
81
+ <th class="info4">info</th>
82
+
83
+ <td class="detail">detail</td>
84
+
85
+ </tr>
86
+
87
+ </table>
88
+
89
+ </div>
90
+
91
+ </div>
92
+
93
+ </div>
94
+
95
+ </main>
96
+
97
+ </body>
98
+
99
+ </html>
100
+
27
101
 
28
102
 
29
103
 
@@ -32,6 +106,94 @@
32
106
 
33
107
 
34
108
 
109
+ ```css
110
+
111
+
112
+
113
+
114
+
115
+ .information {
116
+
117
+ font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
118
+
119
+ "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
120
+
121
+ font-weight: normal;
122
+
123
+ float: left;
124
+
125
+ width: 500px;
126
+
127
+ }
128
+
129
+
130
+
131
+
132
+
133
+ caption {
134
+
135
+ font-size: 24px;
136
+
137
+ font-weight: bold;
138
+
139
+ text-align: left;
140
+
141
+ padding-bottom: 20px;
142
+
143
+ border-bottom: solid 1px #9362c4;
144
+
145
+ margin-bottom: 30px;
146
+
147
+ }
148
+
149
+
150
+
151
+ .info1, .info2, .info3 .info4, .detail {
152
+
153
+ font-size: 18px;
154
+
155
+ padding-bottom: 34px;
156
+
157
+ }
158
+
159
+
160
+
161
+ .info1, .info2, .info3, .info4 {
162
+
163
+ text-align: left;
164
+
165
+ vertical-align: middle;
166
+
167
+ width: 120px;
168
+
169
+ box-sizing: border-box;
170
+
171
+ }
172
+
173
+
174
+
175
+ .info1, .info2, .info3, .info4, :before{
176
+
177
+ border-right: 1px dashed #9362c4;
178
+
179
+ }
180
+
181
+
182
+
183
+ .detail {
184
+
185
+ padding-left: 25px;
186
+
187
+ }
188
+
189
+
190
+
191
+
192
+
193
+ ```
194
+
195
+
196
+
35
197
  ### 試したこと
36
198
 
37
199
 

2

修正中です。。

2018/08/25 10:23

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -24,55 +24,7 @@
24
24
 
25
25
  ```html
26
26
 
27
- <table class="information">
28
27
 
29
- <caption>詳しい情報</caption>
30
-
31
- <tr>
32
-
33
- <th class="info1">所在地</th>
34
-
35
- <td class="detail">浅草</td>
36
-
37
- </tr>
38
-
39
- <tr>
40
-
41
- <th class="info2">電話番号</th>
42
-
43
- <td class="detail"><span class="tell_info">03-1234-5678</span></td>
44
-
45
- </tr>
46
-
47
- </table>
48
-
49
-
50
-
51
- ```
52
-
53
-
54
-
55
- ```css
56
-
57
- .th {
58
-
59
- text-align: left;
60
-
61
- vertical-align: middle;
62
-
63
- width: 120px;
64
-
65
- box-sizing: border-box;
66
-
67
- }
68
-
69
-
70
-
71
- th :before{
72
-
73
- border-right: 1px dashed #9362c4;
74
-
75
- }
76
28
 
77
29
 
78
30
 

1

html記載

2018/08/25 09:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -22,6 +22,38 @@
22
22
 
23
23
 
24
24
 
25
+ ```html
26
+
27
+ <table class="information">
28
+
29
+ <caption>詳しい情報</caption>
30
+
31
+ <tr>
32
+
33
+ <th class="info1">所在地</th>
34
+
35
+ <td class="detail">浅草</td>
36
+
37
+ </tr>
38
+
39
+ <tr>
40
+
41
+ <th class="info2">電話番号</th>
42
+
43
+ <td class="detail"><span class="tell_info">03-1234-5678</span></td>
44
+
45
+ </tr>
46
+
47
+ </table>
48
+
49
+
50
+
51
+ ```
52
+
53
+
54
+
55
+ ```css
56
+
25
57
  .th {
26
58
 
27
59
  text-align: left;
@@ -44,6 +76,10 @@
44
76
 
45
77
 
46
78
 
79
+ ```
80
+
81
+
82
+
47
83
  ### 試したこと
48
84
 
49
85