質問編集履歴

2

ブラウザとバージョン情報の記入

2018/08/27 07:30

投稿

rokujyoma
rokujyoma

スコア8

test CHANGED
File without changes
test CHANGED
@@ -38,6 +38,14 @@
38
38
 
39
39
  追記
40
40
 
41
+ 正しく機能しているブラウザ:Safari Ver.11.1.2
42
+
43
+ 問題が確認されたブラウザ:Internet Explorer Ver.11.0.70
44
+
45
+
46
+
47
+
48
+
41
49
  長いですが、現状はこんな感じになってます。
42
50
 
43
51
 

1

現状の追記

2018/08/27 07:30

投稿

rokujyoma
rokujyoma

スコア8

test CHANGED
File without changes
test CHANGED
@@ -33,3 +33,987 @@
33
33
 
34
34
 
35
35
  理由と解決方法がわからないのでよろしくお願いします。
36
+
37
+
38
+
39
+ 追記
40
+
41
+ 長いですが、現状はこんな感じになってます。
42
+
43
+
44
+
45
+ HTML
46
+
47
+ ```ここに言語を入力
48
+
49
+ <div id="users">
50
+
51
+ <div class="example_table">
52
+
53
+ <table>
54
+
55
+ <thead>
56
+
57
+ <tr>
58
+
59
+ <th class="sort blank-no" data-sort="no">No.</th>
60
+
61
+ <th class="sort blank-img" data-sort="img">イメージ</th>
62
+
63
+ <th class="sort blank-name" data-sort="name">名前</th>
64
+
65
+ <th class="sort a" data-sort="a">A</th>
66
+
67
+ <th class="sort b" data-sort="b">B</th>
68
+
69
+ <th class="sort c" data-sort="c">C</th>
70
+
71
+ <th class="sort d" data-sort="d">D</th>
72
+
73
+ <th class="sort e" data-sort="e">E</th>
74
+
75
+ <th class="sort f" data-sort="f">F</th>
76
+
77
+ <th class="sort g" data-sort="g">G</th>
78
+
79
+ <th class="sort h" data-sort="h">H</th>
80
+
81
+ <th class="sort i" data-sort="i">I</th>
82
+
83
+ <th class="sort j" data-sort="j">J</th>
84
+
85
+ <th class="sort k" data-sort="k">K</th>
86
+
87
+ </tr>
88
+
89
+ </thead>
90
+
91
+ <tbody class="list">
92
+
93
+ <tr>
94
+
95
+ <th class="no">0</th>
96
+
97
+ <th class="img"><p>-</p></th>
98
+
99
+ <th class="name">バナナ</th>
100
+
101
+ <td class="a">1</td>
102
+
103
+ <td class="b">2</td>
104
+
105
+ <td class="c">3</td>
106
+
107
+ <td class="d">4</td>
108
+
109
+ <td class="e">5</td>
110
+
111
+ <td class="f">6</td>
112
+
113
+ <td class="g">7</td>
114
+
115
+ <td class="h">8</td>
116
+
117
+ <td class="i">9</td>
118
+
119
+ <td class="j">10</td>
120
+
121
+ <td class="k">11</td>
122
+
123
+ </tr>
124
+
125
+ <tr>
126
+
127
+ <th class="no">0</th>
128
+
129
+ <th class="img"><p>-</p></th>
130
+
131
+ <th class="name">りんご</th>
132
+
133
+ <td class="a">1</td>
134
+
135
+ <td class="b">2</td>
136
+
137
+ <td class="c">3</td>
138
+
139
+ <td class="d">4</td>
140
+
141
+ <td class="e">5</td>
142
+
143
+ <td class="f">6</td>
144
+
145
+ <td class="g">7</td>
146
+
147
+ <td class="h">8</td>
148
+
149
+ <td class="i">9</td>
150
+
151
+ <td class="j">10</td>
152
+
153
+ <td class="k">11</td>
154
+
155
+ </tr>
156
+
157
+ <tr>
158
+
159
+ <th class="no">0</th>
160
+
161
+ <th class="img"><p>-</p></th>
162
+
163
+ <th class="name">みかん</th>
164
+
165
+ <td class="a">1</td>
166
+
167
+ <td class="b">2</td>
168
+
169
+ <td class="c">3</td>
170
+
171
+ <td class="d">4</td>
172
+
173
+ <td class="e">5</td>
174
+
175
+ <td class="f">6</td>
176
+
177
+ <td class="g">7</td>
178
+
179
+ <td class="h">8</td>
180
+
181
+ <td class="i">9</td>
182
+
183
+ <td class="j">10</td>
184
+
185
+ <td class="k">11</td>
186
+
187
+ </tr>
188
+
189
+ </tbody>
190
+
191
+ </table>
192
+
193
+ </div>
194
+
195
+ </div>
196
+
197
+ ```
198
+
199
+ JavaScript
200
+
201
+ ```ここに言語を入力
202
+
203
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
204
+
205
+ <script>
206
+
207
+ var options = {
208
+
209
+ valueNames: [ 'no','img', 'name', 'a', 'b','c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', ]
210
+
211
+ };
212
+
213
+
214
+
215
+ var userList = new List('users', options);
216
+
217
+ userList.sort( '', {order : 'asc' });
218
+
219
+ </script>
220
+
221
+
222
+
223
+ <style>
224
+
225
+ .sort.desc:after {
226
+
227
+ content:"▼";
228
+
229
+ }
230
+
231
+ .sort.asc:after {
232
+
233
+ content:"▲";
234
+
235
+ }
236
+
237
+ </style>
238
+
239
+ ```
240
+
241
+
242
+
243
+ CSS
244
+
245
+ ```ここに言語を入力<head>
246
+
247
+ <style b="text/css">
248
+
249
+
250
+
251
+ /* example_table */
252
+
253
+
254
+
255
+ .example_table {
256
+
257
+ display: block;
258
+
259
+ position: relative;
260
+
261
+ overflow: scroll;
262
+
263
+ width: calc(100%);
264
+
265
+ height: calc(100vh);
266
+
267
+ border-collapse: collapse;
268
+
269
+ font-size: 0;
270
+
271
+ }
272
+
273
+
274
+
275
+ /* example_table セル*/
276
+
277
+ .example_table th,
278
+
279
+ .example_table td {
280
+
281
+ display: inline-block;
282
+
283
+ height: 3.0rem;
284
+
285
+ background: #fff;
286
+
287
+ font-size: 0.7rem;
288
+
289
+ white-space: nowrap;
290
+
291
+ }
292
+
293
+
294
+
295
+ /* イメージ大きさ */
296
+
297
+ img.exampleicon {
298
+
299
+ width: 3.0rem;
300
+
301
+ }
302
+
303
+
304
+
305
+ /* example_table 行*/
306
+
307
+ .example_table thead,
308
+
309
+ .example_table tbody {
310
+
311
+ display: block;
312
+
313
+ width: -webkit-max-content;
314
+
315
+ width: -moz-max-content;
316
+
317
+ width: max-content;
318
+
319
+ }
320
+
321
+
322
+
323
+ .example_table tbody th {
324
+
325
+ position: -webkit-sticky;
326
+
327
+ position: sticky;
328
+
329
+ z-index: 1;
330
+
331
+ }
332
+
333
+
334
+
335
+ .example_table thead {
336
+
337
+ position: -webkit-sticky;
338
+
339
+ position: sticky;
340
+
341
+ top: 0;
342
+
343
+ z-index: 4;
344
+
345
+ }
346
+
347
+
348
+
349
+ /* example_table 列*/
350
+
351
+
352
+
353
+ .example_table th.no,
354
+
355
+ .example_table td.no {
356
+
357
+ display: inline-block;
358
+
359
+ width: 1.3rem;
360
+
361
+ line-height: 3.0rem;
362
+
363
+ background: #fff;
364
+
365
+ left: 0rem;
366
+
367
+ z-index: 2;
368
+
369
+ }
370
+
371
+
372
+
373
+ .example_table th.img,
374
+
375
+ .example_table td.img {
376
+
377
+ display: inline-block;
378
+
379
+ width: 3.0rem;
380
+
381
+ line-height: 3.0rem;
382
+
383
+ background: #fff;
384
+
385
+ left: 0rem;
386
+
387
+ z-index: 2;
388
+
389
+ }
390
+
391
+
392
+
393
+ .example_table th.name,
394
+
395
+ .example_table td.name {
396
+
397
+ display: inline-block;
398
+
399
+ width: 10.0rem;
400
+
401
+ line-height: 3.0rem;
402
+
403
+ background: #fff;
404
+
405
+ z-index: 1;
406
+
407
+ }
408
+
409
+
410
+
411
+ .example_table th.a,
412
+
413
+ .example_table td.a {
414
+
415
+ display: inline-block;
416
+
417
+ width: 2.5rem;
418
+
419
+ line-height: 3.0rem;
420
+
421
+ background: #fff;
422
+
423
+ left: 0rem;
424
+
425
+ z-index: 1;
426
+
427
+ }
428
+
429
+
430
+
431
+ .example_table th.b,
432
+
433
+ .example_table td.b {
434
+
435
+ display: inline-block;
436
+
437
+ width: 2.0rem;
438
+
439
+ line-height: 3.0rem;
440
+
441
+ background: #fff;
442
+
443
+ }
444
+
445
+
446
+
447
+ .example_table th.c,
448
+
449
+ .example_table td.c {
450
+
451
+ display: inline-block;
452
+
453
+ width: 2.0rem;
454
+
455
+ line-height: 3.0rem;
456
+
457
+ background: #fff;
458
+
459
+ }
460
+
461
+
462
+
463
+ .example_table th.d,
464
+
465
+ .example_table td.d {
466
+
467
+ display: inline-block;
468
+
469
+ width: 1.3rem;
470
+
471
+ line-height: 3.0rem;
472
+
473
+ background: #fff;
474
+
475
+ }
476
+
477
+
478
+
479
+
480
+
481
+ .example_table th.e,
482
+
483
+ .example_table td.e {
484
+
485
+ display: inline-block;
486
+
487
+ width: 1.3rem;
488
+
489
+ line-height: 3.0rem;
490
+
491
+ background: #fff;
492
+
493
+ }
494
+
495
+
496
+
497
+ .example_table th.f,
498
+
499
+ .example_table td.f {
500
+
501
+ display: inline-block;
502
+
503
+ width: 1.3rem;
504
+
505
+ line-height: 3.0rem;
506
+
507
+ background: #fff;
508
+
509
+ }
510
+
511
+
512
+
513
+ .example_table th.g,
514
+
515
+ .example_table td.g {
516
+
517
+ display: inline-block;
518
+
519
+ width: 1.3rem;
520
+
521
+ line-height: 3.0rem;
522
+
523
+ background: #fff;
524
+
525
+ }
526
+
527
+
528
+
529
+ .example_table th.h,
530
+
531
+ .example_table td.h {
532
+
533
+ display: inline-block;
534
+
535
+ width: 1.3rem;
536
+
537
+ line-height: 3.0rem;
538
+
539
+ background: #fff;
540
+
541
+ }
542
+
543
+
544
+
545
+
546
+
547
+ .example_table th.i,
548
+
549
+ .example_table td.i {
550
+
551
+ display: inline-block;
552
+
553
+ width: 1.3rem;
554
+
555
+ line-height: 3.0rem;
556
+
557
+ background: #fff;
558
+
559
+ }
560
+
561
+
562
+
563
+ .example_table th.j,
564
+
565
+ .example_table td.j {
566
+
567
+ display: inline-block;
568
+
569
+ width: 1.3rem;
570
+
571
+ line-height: 3.0rem;
572
+
573
+ background: #fff;
574
+
575
+ }
576
+
577
+
578
+
579
+ .example_table th.k,
580
+
581
+ .example_table td.k {
582
+
583
+ display: inline-block;
584
+
585
+ width: 1.3rem;
586
+
587
+ line-height: 3.0rem;
588
+
589
+ background: #fff;
590
+
591
+ }
592
+
593
+
594
+
595
+
596
+
597
+ /* example_table 列固定場所*/
598
+
599
+
600
+
601
+
602
+
603
+ .example_table thead th.blank-no{
604
+
605
+ position: -webkit-sticky;
606
+
607
+ position: sticky;
608
+
609
+ width: 1.3rem;
610
+
611
+ line-height: 3.0rem;
612
+
613
+ top: 0;
614
+
615
+ left: 0;
616
+
617
+ z-index: 4;
618
+
619
+ }
620
+
621
+
622
+
623
+ .example_table thead th.blank-img{
624
+
625
+ position: -webkit-sticky;
626
+
627
+ position: sticky;
628
+
629
+ width: 3.0rem;
630
+
631
+ line-height: 3.0rem;
632
+
633
+ top: 0;
634
+
635
+ left: 0;
636
+
637
+ z-index: 5;
638
+
639
+ }
640
+
641
+
642
+
643
+ .example_table thead th.blank-name{
644
+
645
+ position: -webkit-sticky;
646
+
647
+ position: sticky;
648
+
649
+ width: 10.0rem;
650
+
651
+ line-height: 3.0rem;
652
+
653
+ top: 0;
654
+
655
+ left: 0rem;
656
+
657
+ z-index: 4;
658
+
659
+ }
660
+
661
+
662
+
663
+
664
+
665
+
666
+
667
+ </style>
668
+
669
+ </head>
670
+
671
+
672
+
673
+ ```
674
+
675
+ CSS デザイン部分
676
+
677
+ ```ここに言語を入力
678
+
679
+ /* デザイン */
680
+
681
+ /* design */
682
+
683
+
684
+
685
+ body {
686
+
687
+ font-family: 'Noto Sans', sans-serif;
688
+
689
+ padding: .3rem;
690
+
691
+ }
692
+
693
+
694
+
695
+ /* ボックス周り影 */
696
+
697
+ .example_table {
698
+
699
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
700
+
701
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
702
+
703
+ }
704
+
705
+ .example_table:hover {
706
+
707
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
708
+
709
+ }
710
+
711
+
712
+
713
+
714
+
715
+ .example_table table {
716
+
717
+ border: 1px solid #CFD8DC;
718
+
719
+ }
720
+
721
+
722
+
723
+
724
+
725
+ /* デザイン セル*/
726
+
727
+ .example_table th {
728
+
729
+ font-weight: bold;
730
+
731
+ }
732
+
733
+
734
+
735
+ .example_table td {
736
+
737
+ font-weight: normal;
738
+
739
+ text-align: center;
740
+
741
+ }
742
+
743
+
744
+
745
+ /* デザイン tbody th*/
746
+
747
+ .example_table tbody th.no {
748
+
749
+ text-align: center;
750
+
751
+ }
752
+
753
+
754
+
755
+ .example_table tbody th.img {
756
+
757
+ text-align: center;
758
+
759
+ }
760
+
761
+
762
+
763
+ .example_table tbody th.name {
764
+
765
+ text-align: center;
766
+
767
+ }
768
+
769
+
770
+
771
+ .example_table tbody th.a {
772
+
773
+ text-align: center;
774
+
775
+ }
776
+
777
+
778
+
779
+ .example_table thead th {
780
+
781
+ background: #000000;
782
+
783
+ color: #E0E0E0;
784
+
785
+ text-align: center;
786
+
787
+ }
788
+
789
+
790
+
791
+ /* デザイン thead th*/
792
+
793
+ .example_table thead th.no {
794
+
795
+ background: #000000;
796
+
797
+ color: #E0E0E0;
798
+
799
+ font-weight: bold;
800
+
801
+ text-align: center;
802
+
803
+ }
804
+
805
+
806
+
807
+ .example_table thead th.img {
808
+
809
+ background: #000000;
810
+
811
+ color: #E0E0E0;
812
+
813
+ font-weight: bold;
814
+
815
+ text-align: center;
816
+
817
+ }
818
+
819
+
820
+
821
+ .example_table thead th.name {
822
+
823
+ background: #000000;
824
+
825
+ color: #E0E0E0;
826
+
827
+ font-weight: bold;
828
+
829
+ text-align: center;
830
+
831
+ }
832
+
833
+
834
+
835
+ .example_table thead th.a {
836
+
837
+ background: #000000;
838
+
839
+ color: #E0E0E0;
840
+
841
+ font-weight: bold;
842
+
843
+ text-align: center;
844
+
845
+ }
846
+
847
+
848
+
849
+ .example_table thead th.b {
850
+
851
+ background: #000000;
852
+
853
+ color: #E0E0E0;
854
+
855
+ font-weight: bold;
856
+
857
+ text-align: center;
858
+
859
+ }
860
+
861
+
862
+
863
+ .example_table thead th.c {
864
+
865
+ background: #000000;
866
+
867
+ color: #E0E0E0;
868
+
869
+ font-weight: bold;
870
+
871
+ text-align: center;
872
+
873
+ }
874
+
875
+
876
+
877
+ .example_table thead th.d {
878
+
879
+ background: #000000;
880
+
881
+ color: #E0E0E0;
882
+
883
+ font-weight: bold;
884
+
885
+ text-align: center;
886
+
887
+ }
888
+
889
+
890
+
891
+ .example_table thead th.e {
892
+
893
+ background: #000000;
894
+
895
+ color: #E0E0E0;
896
+
897
+ font-weight: bold;
898
+
899
+ text-align: center;
900
+
901
+ }
902
+
903
+
904
+
905
+ .example_table thead th.f {
906
+
907
+ background: #000000;
908
+
909
+ color: #E0E0E0;
910
+
911
+ font-weight: bold;
912
+
913
+ text-align: center;
914
+
915
+ }
916
+
917
+
918
+
919
+ .example_table thead th.g {
920
+
921
+ background: #000000;
922
+
923
+ color: #E0E0E0;
924
+
925
+ font-weight: bold;
926
+
927
+ text-align: center;
928
+
929
+ }
930
+
931
+
932
+
933
+ .example_table thead th.h {
934
+
935
+ background: #000000;
936
+
937
+ color: #E0E0E0;
938
+
939
+ font-weight: bold;
940
+
941
+ text-align: center;
942
+
943
+ }
944
+
945
+
946
+
947
+ .example_table thead th.i {
948
+
949
+ background: #000000;
950
+
951
+ color: #E0E0E0;
952
+
953
+ font-weight: bold;
954
+
955
+ text-align: center;
956
+
957
+ }
958
+
959
+
960
+
961
+ .example_table thead th.j {
962
+
963
+ background: #000000;
964
+
965
+ color: #E0E0E0;
966
+
967
+ font-weight: bold;
968
+
969
+ text-align: center;
970
+
971
+ }
972
+
973
+
974
+
975
+ .example_table thead th.k {
976
+
977
+ background: #000000;
978
+
979
+ color: #E0E0E0;
980
+
981
+ font-weight: bold;
982
+
983
+ text-align: center;
984
+
985
+ }
986
+
987
+
988
+
989
+ .example_table tbody tr:nth-child(even) th {
990
+
991
+ background: #222222;
992
+
993
+ color: #FFFFFF;
994
+
995
+ }
996
+
997
+ .example_table tbody tr:nth-child(even) td {
998
+
999
+ background: #f0f0f0;
1000
+
1001
+ }
1002
+
1003
+ .example_table tbody tr:nth-child(odd) th {
1004
+
1005
+ background: #222222;
1006
+
1007
+ color: #FFFFFF;
1008
+
1009
+ }
1010
+
1011
+ .example_table tbody tr:nth-child(odd) td {
1012
+
1013
+ background: #FAFAFA;
1014
+
1015
+ }
1016
+
1017
+
1018
+
1019
+ ```