teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

cssからoverflow: scroll;の記述を削除

2020/12/02 07:48

投稿

hiro_app
hiro_app

スコア123

title CHANGED
File without changes
body CHANGED
@@ -16,8 +16,8 @@
16
16
  <html>
17
17
  <head>
18
18
  <style>
19
- .div1 { margin-top: 100px; margin-left: 100px; width: 300px;}
19
+ .div1 { margin-top: 100px; margin-left: 100px; width: 300px; }
20
- .div2 { display: block; overflow: scroll; height: 200px; width: 300px; }
20
+ .div2 { display: block; height: 200px; width: 300px; }
21
21
  thead tr th { width: 75px; position: sticky; top: 0; }
22
22
  tbody tr td { width: 75px; text-align: center; }
23
23
  </style>

2

説明追記

2020/12/02 07:48

投稿

hiro_app
hiro_app

スコア123

title CHANGED
@@ -1,1 +1,1 @@
1
- stickyfill.min.jsの使い方
1
+ IE11でのposition: sticky(stickyfill.min.jsの使い方
body CHANGED
@@ -3,7 +3,16 @@
3
3
  javascriptで外部js stickyfill.min.jsを読み込みましたが、IE11でテーブルのヘッダーが固定されません。
4
4
  使い方のどこがいけないのでしょうか?
5
5
 
6
+ stickyfill.min.jsは同フォルダに置いておりhtmlの最後に処理を呼び出しているのですが、javascriptエラーは出ていないので読み込めてはいるようです。
7
+
8
+ ```javascript
9
+ <script>
10
+ Stickyfill.add(document.querySelectorAll('.sticky'));
11
+ </script>
12
+ ```
6
13
  ---
14
+ ソース全文
15
+ ```html
7
16
  <html>
8
17
  <head>
9
18
  <style>
@@ -67,4 +76,5 @@
67
76
  Stickyfill.add(document.querySelectorAll('.sticky'));
68
77
  </script>
69
78
  </body>
70
- </html>
79
+ </html>
80
+ ```

1

参考用ソースを少し手短に

2020/12/02 02:49

投稿

hiro_app
hiro_app

スコア123

title CHANGED
File without changes
body CHANGED
@@ -8,7 +8,6 @@
8
8
  <head>
9
9
  <style>
10
10
  .div1 { margin-top: 100px; margin-left: 100px; width: 300px;}
11
- .div2 { height: 300px; }
12
11
  .div2 { display: block; overflow: scroll; height: 200px; width: 300px; }
13
12
  thead tr th { width: 75px; position: sticky; top: 0; }
14
13
  tbody tr td { width: 75px; text-align: center; }
@@ -46,6 +45,8 @@
46
45
  <td class="test_td8">test9</td>
47
46
  <td class="test_td8">test10</td>
48
47
  </tr>
48
+ 繰り返し
49
+
49
50
  <tr>
50
51
  <td class="test_td1">test1</td>
51
52
  <td class="test_td2">test2</td>
@@ -58,126 +59,6 @@
58
59
  <td class="test_td8">test9</td>
59
60
  <td class="test_td8">test10</td>
60
61
  </tr>
61
- <tr>
62
- <td class="test_td1">test1</td>
63
- <td class="test_td2">test2</td>
64
- <td class="test_td3">test3</td>
65
- <td class="test_td4">test4</td>
66
- <td class="test_td5">test5</td>
67
- <td class="test_td6">test6</td>
68
- <td class="test_td7">test7</td>
69
- <td class="test_td8">test8</td>
70
- <td class="test_td8">test9</td>
71
- <td class="test_td8">test10</td>
72
- </tr>
73
- <tr>
74
- <td class="test_td1">test1</td>
75
- <td class="test_td2">test2</td>
76
- <td class="test_td3">test3</td>
77
- <td class="test_td4">test4</td>
78
- <td class="test_td5">test5</td>
79
- <td class="test_td6">test6</td>
80
- <td class="test_td7">test7</td>
81
- <td class="test_td8">test8</td>
82
- <td class="test_td8">test9</td>
83
- <td class="test_td8">test10</td>
84
- </tr>
85
- <tr>
86
- <td class="test_td1">test1</td>
87
- <td class="test_td2">test2</td>
88
- <td class="test_td3">test3</td>
89
- <td class="test_td4">test4</td>
90
- <td class="test_td5">test5</td>
91
- <td class="test_td6">test6</td>
92
- <td class="test_td7">test7</td>
93
- <td class="test_td8">test8</td>
94
- <td class="test_td8">test9</td>
95
- <td class="test_td8">test10</td>
96
- </tr>
97
- <tr>
98
- <td class="test_td1">test1</td>
99
- <td class="test_td2">test2</td>
100
- <td class="test_td3">test3</td>
101
- <td class="test_td4">test4</td>
102
- <td class="test_td5">test5</td>
103
- <td class="test_td6">test6</td>
104
- <td class="test_td7">test7</td>
105
- <td class="test_td8">test8</td>
106
- <td class="test_td8">test9</td>
107
- <td class="test_td8">test10</td>
108
- </tr>
109
- <tr>
110
- <td class="test_td1">test1</td>
111
- <td class="test_td2">test2</td>
112
- <td class="test_td3">test3</td>
113
- <td class="test_td4">test4</td>
114
- <td class="test_td5">test5</td>
115
- <td class="test_td6">test6</td>
116
- <td class="test_td7">test7</td>
117
- <td class="test_td8">test8</td>
118
- <td class="test_td8">test9</td>
119
- <td class="test_td8">test10</td>
120
- </tr>
121
- <tr>
122
- <td class="test_td1">test1</td>
123
- <td class="test_td2">test2</td>
124
- <td class="test_td3">test3</td>
125
- <td class="test_td4">test4</td>
126
- <td class="test_td5">test5</td>
127
- <td class="test_td6">test6</td>
128
- <td class="test_td7">test7</td>
129
- <td class="test_td8">test8</td>
130
- <td class="test_td8">test9</td>
131
- <td class="test_td8">test10</td>
132
- </tr>
133
- <tr>
134
- <td class="test_td1">test1</td>
135
- <td class="test_td2">test2</td>
136
- <td class="test_td3">test3</td>
137
- <td class="test_td4">test4</td>
138
- <td class="test_td5">test5</td>
139
- <td class="test_td6">test6</td>
140
- <td class="test_td7">test7</td>
141
- <td class="test_td8">test8</td>
142
- <td class="test_td8">test9</td>
143
- <td class="test_td8">test10</td>
144
- </tr>
145
- <tr>
146
- <td class="test_td1">test1</td>
147
- <td class="test_td2">test2</td>
148
- <td class="test_td3">test3</td>
149
- <td class="test_td4">test4</td>
150
- <td class="test_td5">test5</td>
151
- <td class="test_td6">test6</td>
152
- <td class="test_td7">test7</td>
153
- <td class="test_td8">test8</td>
154
- <td class="test_td8">test9</td>
155
- <td class="test_td8">test10</td>
156
- </tr>
157
- <tr>
158
- <td class="test_td1">test1</td>
159
- <td class="test_td2">test2</td>
160
- <td class="test_td3">test3</td>
161
- <td class="test_td4">test4</td>
162
- <td class="test_td5">test5</td>
163
- <td class="test_td6">test6</td>
164
- <td class="test_td7">test7</td>
165
- <td class="test_td8">test8</td>
166
- <td class="test_td8">test9</td>
167
- <td class="test_td8">test10</td>
168
- </tr>
169
- <tr>
170
- <td class="test_td1">test1</td>
171
- <td class="test_td2">test2</td>
172
- <td class="test_td3">test3</td>
173
- <td class="test_td4">test4</td>
174
- <td class="test_td5">test5</td>
175
- <td class="test_td6">test6</td>
176
- <td class="test_td7">test7</td>
177
- <td class="test_td8">test8</td>
178
- <td class="test_td8">test9</td>
179
- <td class="test_td8">test10</td>
180
- </tr>
181
62
  </tbody>
182
63
  </table>
183
64
  </div>