質問編集履歴

2

コード修正

2021/05/17 12:48

投稿

YouS2017
YouS2017

スコア2

test CHANGED
File without changes
test CHANGED
@@ -34,42 +34,176 @@
34
34
 
35
35
 
36
36
 
37
+ いただいたアドバイスを元に修正とテーブル部全体のコードも載せました。
38
+
39
+ 現状やはり1行目と2行目の固定ができない状況です。
40
+
41
+
42
+
37
43
  ```html
38
44
 
45
+ {% set n = namespace(store = '') %}
46
+
39
- <table class="table table-bordered border-primary fixedcolumn">
47
+ {% set m = namespace(shiftname = '') %}
48
+
40
-
49
+ {% set l = namespace(loopcnt = 1) %}
50
+
41
- <tr>
51
+ {% for post in posts %}
42
-
52
+
43
- {% for store in poststore %}
53
+ {% if n.store != post.store %}
44
-
54
+
45
- {% if store.store_name == post.store %}
55
+ {% if not loop.first %}
46
-
56
+
47
- <th class="fixedtable" style="width: 150px;"><a href="/store?store_no={{ post.store }}">{{ store.store_name }}</a></th>
57
+ </tbody>
48
-
58
+
49
- <th colspan={{ day_count }} style="text-align: left;">{{ store.shift_time }}</th>
59
+ </table>
60
+
61
+ </div>
50
62
 
51
63
  {% endif %}
52
64
 
65
+ <div class="table-responsive">
66
+
67
+ <table class="table table-bordered border-primary">
68
+
69
+ <thead class="fixedcolumn">
70
+
71
+ <tr>
72
+
73
+ {% for store in poststore %}
74
+
75
+ {% if store.store_name == post.store %}
76
+
77
+ <th class="fixedtable" style="width: 150px;"><a href="/store?store_no={{ post.store }}">{{ store.store_name }}</a></th>
78
+
79
+ <th colspan={{ day_count }} style="text-align: left;">{{ store.shift_time }}</th>
80
+
81
+ {% endif %}
82
+
83
+ {% endfor %}
84
+
85
+ </tr>
86
+
87
+ <tr>
88
+
89
+ <th class="fixedtable">氏名</th>
90
+
91
+ {% for i in range(1,day_count+1) %}
92
+
93
+ <th style="font-size: 0.75rem;">{{ i }}日</th>
94
+
95
+ {% endfor %}
96
+
97
+ </tr>
98
+
99
+ </thead>
100
+
101
+ <tbody>
102
+
103
+ {% endif %}
104
+
105
+ {% if m.shiftname != post.name %}
106
+
107
+ <tr>
108
+
109
+ <td class="fixedtable"><a href="/name?staff_name={{post.name}}">{{ post.name }}</a></td>
110
+
111
+ <td>{{ post.shift }}</td>
112
+
113
+ {% set l.loopcnt = l.loopcnt + 1 %}
114
+
115
+ {% else %}
116
+
117
+ {% if l.loopcnt == day_count %}
118
+
119
+ <td>{{ post.shift }}</td>
120
+
121
+ </tr>
122
+
123
+ {% set l.loopcnt = 1 %}
124
+
125
+ {% else %}
126
+
127
+ <td>{{ post.shift }}</td>
128
+
129
+ {% set l.loopcnt = l.loopcnt + 1 %}
130
+
131
+ {% endif %}
132
+
133
+ {% endif %}
134
+
135
+ {% set m.shiftname = post.name %}
136
+
137
+ {% set n.store = post.store %}
138
+
53
139
  {% endfor %}
54
140
 
141
+ </table>
142
+
55
- </tr>
143
+ </div>
56
-
57
- <tr>
58
-
59
- <th class="fixedtable">氏名</th>
60
-
61
- {% for i in range(1,day_count+1) %}
62
-
63
- <th style="font-size: 0.75rem;">{{ i }}日</th>
64
-
65
- {% endfor %}
66
-
67
- </tr>
68
144
 
69
145
  ```
70
146
 
147
+
148
+
71
149
  ```CSS
72
150
 
151
+ thead tr{
152
+
153
+ height: 60px;
154
+
155
+ }
156
+
157
+
158
+
159
+ .fixedcolumn tr:first-child th {
160
+
161
+ position: -webkit-sticky;
162
+
163
+ position: sticky;
164
+
165
+ top: 0;
166
+
167
+ background-color: #202020 !important;
168
+
169
+ color: white !important;
170
+
171
+ }
172
+
173
+
174
+
175
+ .fixedcolumn tr:nth-child(2) th {
176
+
177
+ position: -webkit-sticky;
178
+
179
+ position: sticky;
180
+
181
+ top: 60px;
182
+
183
+ background-color: #202020 !important;
184
+
185
+ color: white !important;
186
+
187
+ }
188
+
189
+
190
+
191
+ .fixedcolumn tr:first-child th:first-child {
192
+
193
+ z-index: 1;
194
+
195
+ }
196
+
197
+
198
+
199
+ .fixedcolumn tr:nth-child(2) th:first-child{
200
+
201
+ z-index: 1;
202
+
203
+ }
204
+
205
+
206
+
73
207
  .fixedtable {
74
208
 
75
209
  position: -webkit-sticky;
@@ -84,20 +218,4 @@
84
218
 
85
219
  }
86
220
 
87
-
88
-
89
- .fixedcolumn th {
90
-
91
- position: -webkit-sticky;
92
-
93
- position: sticky;
94
-
95
- top: 0;
96
-
97
- background-color: #202020 !important;
98
-
99
- color: white !important;
100
-
101
- }
102
-
103
221
  ```

1

行と列の表記間違い修正

2021/05/17 12:48

投稿

YouS2017
YouS2017

スコア2

test CHANGED
@@ -1 +1 @@
1
- CSSの「sticky」でを固定したいけれども固定されない
1
+ CSSの「sticky」でを固定したいけれども固定されない
test CHANGED
@@ -4,9 +4,9 @@
4
4
 
5
5
  CSSにて「position: sticky;」を指定するというところは理解できました。
6
6
 
7
- そこでまず列の固定でtableの最初の項目に「fixedtable」というclassをつけて動くのを確認しました。
7
+ まず列の固定でtableの最初の項目に「fixedtable」というclassをつけて動くのを確認しました。
8
8
 
9
- その後行を固定しようと同じように「fixedcolumn」というclassをつけてみたところ全く動作せず詰まってしまいました。
9
+ その後同じように行を固定しようと同じように「fixedcolumn」というclassをつけてみたところ全く動作せず詰まってしまいました。
10
10
 
11
11
 
12
12