質問編集履歴

3

修正

2021/11/04 13:04

投稿

KKsall
KKsall

スコア25

test CHANGED
File without changes
test CHANGED
@@ -255,3 +255,7 @@
255
255
  ・codepen
256
256
 
257
257
  https://codepen.io/boo-jp/pen/ZEJvPEV
258
+
259
+ サンプル
260
+
261
+ https://codepen.io/boo-jp/pen/eYEVmaE

2

修正

2021/11/04 13:04

投稿

KKsall
KKsall

スコア25

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,7 @@
1
+ 判定したいのはクリックイベントで、左右の動くのはスクールバーをもってるtableとなります
2
+
3
+
4
+
1
5
  ```ここに言語を入力
2
6
 
3
7
  <div class="l-table">

1

修正

2021/11/04 11:41

投稿

KKsall
KKsall

スコア25

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,223 @@
1
1
  ```ここに言語を入力
2
2
 
3
+ <div class="l-table">
4
+
5
+ <div class="js-scrollable p-scrollbar">
6
+
7
+ <table class="p-table-search-theme">
8
+
9
+ <thead class="has-background-thead">
10
+
11
+ <tr class="thead">
12
+
13
+ <th class="sorting th-first" rowspan="2">登録<br>番号</th>
14
+
15
+ <th class="sorting th-second" rowspan="2">登録<br>番号</th>
16
+
17
+ <th class="sorting th-third" rowspan="2">技術名称</th>
18
+
19
+ <th class="th-fourth" rowspan="2">技術名称</th>
20
+
21
+ <th class="th-fifth" colspan="2">技術名称 </th>
22
+
23
+ <th class="sorting th-seventh" rowspan="2">技術名称</th>
24
+
25
+ <th class="sorting th-eighth" rowspan="2">技術名称</th>
26
+
27
+ <th class="th-ninth" rowspan="2">カタログ・パンフレット</th>
28
+
29
+ </tr>
30
+
31
+ <tr>
32
+
33
+ <th class="sorting-sc">農業農村<br>設備事業</th>
34
+
35
+ <th class="sorting-sc">その他<br>事業</th>
36
+
37
+ </tr>
38
+
39
+ </thead>
40
+
41
+ <tbody>
42
+
43
+ <tr>
44
+
45
+ <td> 0 </td>
46
+
47
+ <td class="text-left"><a href="#"> 株</a>
48
+
49
+ </td>
50
+
51
+ <td class="text-left"><a href="#">text</a></td>
52
+
53
+ <td class="text-left">text
54
+
55
+ </td>
56
+
57
+ <td>12648 件</td>
58
+
59
+ <td>12648 件</td>
60
+
61
+ <td>2021年</td>
62
+
63
+ <td>2021年/01</td>
64
+
65
+ <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
66
+
67
+ </tr>
68
+
69
+ <tr>
70
+
71
+ <td> 1 </td>
72
+
73
+ <td class="text-left"><a href="#"> 株</a>
74
+
75
+ </td>
76
+
77
+ <td class="text-left"><a href="#">text</a></td>
78
+
79
+ <td class="text-left">text
80
+
81
+ </td>
82
+
83
+ <td>12648 件</td>
84
+
85
+ <td>12648 件</td>
86
+
87
+ <td>2021年</td>
88
+
89
+ <td>2021年/01</td>
90
+
91
+ <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
92
+
93
+ </tr>
94
+
95
+ <tr>
96
+
97
+ <td> 2 </td>
98
+
99
+ <td class="text-left"><a href="#"> 株</a>
100
+
101
+ </td>
102
+
103
+ <td class="text-left"><a href="#">text</a></td>
104
+
105
+ <td class="text-left">text
106
+
107
+ </td>
108
+
109
+ <td>12648 件</td>
110
+
111
+ <td>12648 件</td>
112
+
113
+ <td>2021年</td>
114
+
115
+ <td>2021年/01</td>
116
+
117
+ <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
118
+
119
+ </tr>
120
+
121
+ <tr>
122
+
123
+ <td> 3 </td>
124
+
125
+ <td class="text-left"><a href="#"> 株</a>
126
+
127
+ </td>
128
+
129
+ <td class="text-left"><a href="#">text</a></td>
130
+
131
+ <td class="text-left">text
132
+
133
+ </td>
134
+
135
+ <td>12648 件</td>
136
+
137
+ <td>12648 件</td>
138
+
139
+ <td>2021年</td>
140
+
141
+ <td>2021年/01</td>
142
+
143
+ <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
144
+
145
+ </tr>
146
+
147
+ <tr>
148
+
149
+ <td> 4 </td>
150
+
151
+ <td class="text-left"><a href="#"> 株</a>
152
+
153
+ </td>
154
+
155
+ <td class="text-left"><a href="#">text</a></td>
156
+
157
+ <td class="text-left">text
158
+
159
+ </td>
160
+
161
+ <td>12648 件</td>
162
+
163
+ <td>12648 件</td>
164
+
165
+ <td>2021年</td>
166
+
167
+ <td>2021年/01</td>
168
+
169
+ <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
170
+
171
+ </tr>
172
+
173
+ <tr>
174
+
175
+ <td> 5 </td>
176
+
177
+ <td class="text-left"><a href="#"> 株</a>
178
+
179
+ </td>
180
+
181
+ <td class="text-left"><a href="#">text</a></td>
182
+
183
+ <td class="text-left">text
184
+
185
+ </td>
186
+
187
+ <td>12648 件</td>
188
+
189
+ <td>12648 件</td>
190
+
191
+ <td>2021年</td>
192
+
193
+ <td>2021年/01</td>
194
+
195
+ <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
196
+
197
+ </tr>
198
+
199
+ </tbody>
200
+
201
+ </table>
202
+
3
203
  <button type="button" class="c-scroll-button border-radius"><i class="ph-caret-left"></i><i class="ph-caret-left"></i></button>
4
204
 
205
+ </div>
206
+
207
+ </div>
208
+
209
+ <style>
210
+
211
+ <link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.0.0/css/scroll-hint.css">
212
+
213
+ </style>
214
+
215
+ ```
216
+
217
+ ```ここに言語を入力
218
+
219
+ <button type="button" class="c-scroll-button border-radius"><i class="ph-caret-left"></i><i class="ph-caret-left"></i></button>
220
+
5
221
 
6
222
 
7
223
  const buttonscroll = document.querySelector('.c-scroll-button');
@@ -31,3 +247,7 @@
31
247
  }
32
248
 
33
249
  ```
250
+
251
+ ・codepen
252
+
253
+ https://codepen.io/boo-jp/pen/ZEJvPEV