質問編集履歴

2

実際のコードを記載しました。。。!

2019/08/06 05:52

投稿

xx_6_6_xx
xx_6_6_xx

スコア42

test CHANGED
File without changes
test CHANGED
@@ -155,3 +155,421 @@
155
155
  ↓0の列を非表示にして、幅だけをつめたい
156
156
 
157
157
  ![イメージ説明](6247288bf34e68173e67842c58e68a0b.png)
158
+
159
+
160
+
161
+ ### 追記します(実際のコードです)
162
+
163
+
164
+
165
+ ```html
166
+
167
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
168
+
169
+
170
+
171
+ <table id="tbl">
172
+
173
+ <tbody>
174
+
175
+ <tr class="head">
176
+
177
+ <td rowspan="2">No</td>
178
+
179
+ <td rowspan="2">タイトル</td>
180
+
181
+ <td rowspan="2" class="detail">データ</td>
182
+
183
+ <td rowspan="2" class="date"></td>
184
+
185
+ <td rowspan="3">累計</td>
186
+
187
+ <td rowspan="3">統計</td>
188
+
189
+ <td colspan="14">18年度</td>
190
+
191
+ <td rowspan="3">18年度合計</td>
192
+
193
+
194
+
195
+ </tr>
196
+
197
+ <tr class="head">
198
+
199
+ <td colspan="6">18上期</td>
200
+
201
+ <td rowspan="2">18上期合計</td>
202
+
203
+ <td colspan="6">18下期</td>
204
+
205
+ <td rowspan="2">18下期合計</td>
206
+
207
+ </tr>
208
+
209
+ <tr class="head">
210
+
211
+ <td>No</td>
212
+
213
+ <td>品番</td>
214
+
215
+ <td class="detail">品名</td>
216
+
217
+ <td class="date">確認日</td>
218
+
219
+ <td class="m1">18/1</td>
220
+
221
+ <td class="m2">18/2</td>
222
+
223
+ <td class="m3">18/3</td>
224
+
225
+ <td class="m4">18/4</td>
226
+
227
+ <td class="m5">18/5</td>
228
+
229
+ <td class="m6">18/6</td>
230
+
231
+ <td class="m7">18/7</td>
232
+
233
+ <td class="m8">18/8</td>
234
+
235
+ <td class="m9">18/9</td>
236
+
237
+ <td class="m10">18/10</td>
238
+
239
+ <td class="m11">18/11</td>
240
+
241
+ <td class="m12">18/12</td>
242
+
243
+ </tr>
244
+
245
+ <tr>
246
+
247
+ <td rowspan="2">1</td>
248
+
249
+ <td rowspan="2">RNG001</td>
250
+
251
+ <td rowspan="2" class="detail">りんご</td>
252
+
253
+ <td class="date">2019年2月28日</td>
254
+
255
+ <td>3</td>
256
+
257
+ <td></td>
258
+
259
+ <td class="m1"></td>
260
+
261
+ <td class="m2"></td>
262
+
263
+ <td class="m3"></td>
264
+
265
+ <td class="m4"></td>
266
+
267
+ <td class="m5">40</td>
268
+
269
+ <td class="m6">13</td>
270
+
271
+ <td>13</td>
272
+
273
+ <td class="m7">5</td>
274
+
275
+ <td class="m8"></td>
276
+
277
+ <td class="m9"></td>
278
+
279
+ <td class="m10"></td>
280
+
281
+ <td class="m11"></td>
282
+
283
+ <td class="m12">627</td>
284
+
285
+ <td>627</td>
286
+
287
+ <td>640</td>
288
+
289
+
290
+
291
+ </tr>
292
+
293
+ <tr>
294
+
295
+ <td class="date">2019年3月29日</td>
296
+
297
+ <td>3</td>
298
+
299
+ <td></td>
300
+
301
+ <td class="m1"></td>
302
+
303
+ <td class="m2"></td>
304
+
305
+ <td class="m3"></td>
306
+
307
+ <td class="m4"></td>
308
+
309
+ <td class="m5">40</td>
310
+
311
+ <td class="m6">12</td>
312
+
313
+ <td>12</td>
314
+
315
+ <td class="m7">5</td>
316
+
317
+ <td class="m8"></td>
318
+
319
+ <td class="m9"></td>
320
+
321
+ <td class="m10"></td>
322
+
323
+ <td class="m11"></td>
324
+
325
+ <td class="m12">627</td>
326
+
327
+ <td>627</td>
328
+
329
+ <td>639</td>
330
+
331
+ </tr>
332
+
333
+ <tr>
334
+
335
+ <td colspan="3" rowspan="2"></td>
336
+
337
+ <td>2019年2月28日</td>
338
+
339
+ <td>42</td>
340
+
341
+ <td>10</td>
342
+
343
+ <td class="m1"></td>
344
+
345
+ <td class="m2"></td>
346
+
347
+ <td class="m3"></td>
348
+
349
+ <td class="m4"></td>
350
+
351
+ <td class="m5">40</td>
352
+
353
+ <td class="m6">18</td>
354
+
355
+ <td>18</td>
356
+
357
+ <td class="m7">5</td>
358
+
359
+ <td class="m8"></td>
360
+
361
+ <td class="m9"></td>
362
+
363
+ <td class="m10"></td>
364
+
365
+ <td class="m11"></td>
366
+
367
+ <td class="m12">627</td>
368
+
369
+ <td>627</td>
370
+
371
+ <td>645</td>
372
+
373
+ </tr>
374
+
375
+ <tr>
376
+
377
+ <td>2019年3月29日</td>
378
+
379
+ <td>42</td>
380
+
381
+ <td>10</td>
382
+
383
+ <td class="m1"></td>
384
+
385
+ <td class="m2"></td>
386
+
387
+ <td class="m3"></td>
388
+
389
+ <td class="m4"></td>
390
+
391
+ <td class="m5">40</td>
392
+
393
+ <td class="m6">17</td>
394
+
395
+ <td>17</td>
396
+
397
+ <td class="m7">5</td>
398
+
399
+ <td class="m8"></td>
400
+
401
+ <td class="m9"></td>
402
+
403
+ <td class="m10"></td>
404
+
405
+ <td class="m11"></td>
406
+
407
+ <td class="m12">627</td>
408
+
409
+ <td>627</td>
410
+
411
+ <td>644</td>
412
+
413
+ </tr>
414
+
415
+ </table>
416
+
417
+ ```
418
+
419
+
420
+
421
+ ```css
422
+
423
+ table{
424
+
425
+ width:160%;
426
+
427
+ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
428
+
429
+ color:#333;
430
+
431
+ margin:15px 0px 15px 5px;
432
+
433
+ text-align:right;
434
+
435
+ }
436
+
437
+
438
+
439
+ table , td{
440
+
441
+ border-left: 1px solid #595959;
442
+
443
+ border-right: 1px solid #595959;
444
+
445
+ border-collapse: collapse;
446
+
447
+ font-size:11px !important;
448
+
449
+ }
450
+
451
+
452
+
453
+ td{
454
+
455
+ padding-right:2px;
456
+
457
+ }
458
+
459
+
460
+
461
+
462
+
463
+ .head td{
464
+
465
+ background-color:#76fb89;
466
+
467
+ text-align:center;
468
+
469
+ border:1px solid #555;
470
+
471
+ }
472
+
473
+
474
+
475
+ .date{
476
+
477
+ width:100px;
478
+
479
+ padding:2px 0px 2px 5px;
480
+
481
+ text-align:center;
482
+
483
+ color:#333;
484
+
485
+ }
486
+
487
+
488
+
489
+ .detail{
490
+
491
+ width:370px;
492
+
493
+ height:25px;
494
+
495
+ padding:2px 0px 2px 5px;
496
+
497
+ text-align:left;
498
+
499
+ border-bottom:1px solid #595959;
500
+
501
+ }
502
+
503
+
504
+
505
+ #tbl tr:nth-child(2n+5){
506
+
507
+ border-bottom:1px solid #555;
508
+
509
+ }
510
+
511
+
512
+
513
+ #tbl tr:nth-child(2n+4) td:nth-child(1),
514
+
515
+ #tbl tr:nth-child(2n+4) td:nth-child(2){
516
+
517
+ border-bottom:1px solid #555;
518
+
519
+ }
520
+
521
+
522
+
523
+ #tbl tr:nth-last-child(2) td:nth-child(2){
524
+
525
+ border-bottom:none !important;
526
+
527
+ }
528
+
529
+ ```
530
+
531
+
532
+
533
+ ```jQuery
534
+
535
+ j = 4;
536
+
537
+ for(i=5;i<=36;++i){
538
+
539
+ a = $('#tbl tr:nth-last-child(3) td:nth-child('+ i +')')//確認日1合計
540
+
541
+ b = $('#tbl tr:nth-last-child(2) td:nth-child('+ j +')')//確認日2合計
542
+
543
+ if(a.text()== ""){//確認日1合計が空白
544
+
545
+ if(b.text()==""){//確認日2合計が空白
546
+
547
+ a = a.attr("class");//クラス名取得
548
+
549
+ b = b.attr("class");//クラス名取得
550
+
551
+ change = $('#tbl tr td.'+ a +',#tbl tr td.'+ b +'');
552
+
553
+ change.css('visibility','hidden');
554
+
555
+ change.css('border-left','solid 0');
556
+
557
+ change.css('border-right','solid 0');
558
+
559
+ change.css('width','0');
560
+
561
+ change.css('padding','0');
562
+
563
+ change.css('margin','0');
564
+
565
+ change.css('border-left','solid 0');
566
+
567
+ }
568
+
569
+ }
570
+
571
+ j = j + 1;
572
+
573
+ }
574
+
575
+ ```

1

図示しました。。

2019/08/06 05:52

投稿

xx_6_6_xx
xx_6_6_xx

スコア42

test CHANGED
File without changes
test CHANGED
@@ -139,3 +139,19 @@
139
139
  どなたか分かるかた、教えていただけるとありがたいです。。。。
140
140
 
141
141
  よろしくお願い致します。
142
+
143
+
144
+
145
+ ### 追記します
146
+
147
+
148
+
149
+ すみません、追記します。。。
150
+
151
+ やはり、Aグル―プのcolspanを変更するしかないのでしょうか。。。。
152
+
153
+
154
+
155
+ ↓0の列を非表示にして、幅だけをつめたい
156
+
157
+ ![イメージ説明](6247288bf34e68173e67842c58e68a0b.png)