teratail
回答率
85.47%
質問するログイン新規登録
トップHTMLに関する質問レイアウト崩れの調整の方法を教えてください

編集履歴

回答編集履歴

1

# sample

2018/03/06 08:21

投稿

yambejp
yambejp

スコア114883

test CHANGED
@@ -2,6 +2,338 @@
2
2
 
3
3
  （縦スクロールを出したいということ？）
4
4
 
5
- colspanで意味なく行をまとめるのはナンセンスだと思います
5
+ colspanで意味なく列をまとめるのはナンセンスだと思います
6
6
 
7
7
  複数列にまたがるものでなければcolspan設定を外したほうがよいでしょう
8
+
9
+
10
+
11
+ # sample
12
+
13
+ 以前書いてあまり美しくないので推奨はしていないですが
14
+
15
+ 以下のようにすればヘッダ固定できます
16
+
17
+ （IE8以上、firefox、chromeで動作確認）
18
+
19
+
20
+
21
+ ```CSS
22
+
23
+ /* 最低限の設定 */
24
+
25
+ table{border-collapse:collapse;}
26
+
27
+ th,td{border:1px solid #000000;}
28
+
29
+ ```
30
+
31
+ ```javascript
32
+
33
+ /* jQuery */
34
+
35
+ $(function(){
36
+
37
+ $('.table-scroll').each(function(){
38
+
39
+ $(this).wrap($('<div>').addClass('scroll-parent')).wrap($('<div>').addClass('scroll-child'));
40
+
41
+ $(this).clone(true).removeClass('table-scroll').addClass('scroll-head').appendTo($(this).closest('.scroll-parent'));
42
+
43
+ $(this).closest('.scroll-parent').find('.scroll-head').css('top',$(this).closest('.scroll-parent').offset().top);
44
+
45
+ $('.scroll-child').css({"height":"300px","overflow-y":"scroll","overflow-x":"hidden","position":"relative"});
46
+
47
+ $('.scroll-head').css({"position":"absolute"});
48
+
49
+ $('.scroll-head thead').css({"background-Color":"red"});
50
+
51
+ $('.scroll-head tbody').css({"visibility":"collapse","background-Color":"red"});
52
+
53
+ });
54
+
55
+ });
56
+
57
+ ```
58
+
59
+ ```HTML
60
+
61
+
62
+
63
+ <!--
64
+
65
+ スクロールを付けたいテーブルにtable-scrollクラスを付加
66
+
67
+ 2行目以降はダミー用にコピーしてあります
68
+
69
+ -->
70
+
71
+ <TABLE class="TBL_SEARCH table-scroll">
72
+
73
+ <THEAD>
74
+
75
+ <TR>
76
+
77
+ <TD rowspan="2">&nbsp;</TD>
78
+
79
+ <TD rowspan="2">見積№</TD>
80
+
81
+ <TD>見積日</TD>
82
+
83
+ <TD>得意先</TD>
84
+
85
+ <TD></TD>
86
+
87
+ <TD colspan="3">税抜合計金額</TD>
88
+
89
+ </TR>
90
+
91
+ <TR>
92
+
93
+ <TD>品番</TD>
94
+
95
+ <TD>品名</TD>
96
+
97
+ <TD>数量</TD>
98
+
99
+ <TD>単位</TD>
100
+
101
+ <TD>単価</TD>
102
+
103
+ <TD>税抜金額</TD>
104
+
105
+ </TR>
106
+
107
+ </THEAD>
108
+
109
+ <TBODY>
110
+
111
+ <TR>
112
+
113
+ <TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD>
114
+
115
+ <TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD>
116
+
117
+ <TD class="ITIRAN_MEI_1" align="center">2018/02/28</td>
118
+
119
+ <TD class="ITIRAN_MEI_1" >(株)XXX</TD>
120
+
121
+ <TD class="ITIRAN_MEI_1" ></TD>
122
+
123
+ <TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD>
124
+
125
+ </TR>
126
+
127
+ <TR>
128
+
129
+ <TD class="ITIRAN_MEI_1" align="left">006804</TD>
130
+
131
+ <TD class="ITIRAN_MEI_1">&nbsp;&nbsp;鋼板（寸法）</td>
132
+
133
+ <TD class="ITIRAN_MEI_1" align="right">10.00</TD>
134
+
135
+ <TD class="ITIRAN_MEI_1">個</td>
136
+
137
+ <TD class="ITIRAN_MEI_1" align="right">1,000.00</TD>
138
+
139
+ <TD class="ITIRAN_MEI_1" align="right">10,000</TD>
140
+
141
+ </TR>
142
+
143
+ <TR>
144
+
145
+ <TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD>
146
+
147
+ <TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD>
148
+
149
+ <TD class="ITIRAN_MEI_1" align="center">2018/02/28</td>
150
+
151
+ <TD class="ITIRAN_MEI_1" >(株)XXX</TD>
152
+
153
+ <TD class="ITIRAN_MEI_1" ></TD>
154
+
155
+ <TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD>
156
+
157
+ </TR>
158
+
159
+ <TR>
160
+
161
+ <TD class="ITIRAN_MEI_1" align="left">006804</TD>
162
+
163
+ <TD class="ITIRAN_MEI_1">&nbsp;&nbsp;鋼板（寸法）</td>
164
+
165
+ <TD class="ITIRAN_MEI_1" align="right">10.00</TD>
166
+
167
+ <TD class="ITIRAN_MEI_1">個</td>
168
+
169
+ <TD class="ITIRAN_MEI_1" align="right">1,000.00</TD>
170
+
171
+ <TD class="ITIRAN_MEI_1" align="right">10,000</TD>
172
+
173
+ </TR>
174
+
175
+ <TR>
176
+
177
+ <TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD>
178
+
179
+ <TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD>
180
+
181
+ <TD class="ITIRAN_MEI_1" align="center">2018/02/28</td>
182
+
183
+ <TD class="ITIRAN_MEI_1" >(株)XXX</TD>
184
+
185
+ <TD class="ITIRAN_MEI_1" ></TD>
186
+
187
+ <TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD>
188
+
189
+ </TR>
190
+
191
+ <TR>
192
+
193
+ <TD class="ITIRAN_MEI_1" align="left">006804</TD>
194
+
195
+ <TD class="ITIRAN_MEI_1">&nbsp;&nbsp;鋼板（寸法）</td>
196
+
197
+ <TD class="ITIRAN_MEI_1" align="right">10.00</TD>
198
+
199
+ <TD class="ITIRAN_MEI_1">個</td>
200
+
201
+ <TD class="ITIRAN_MEI_1" align="right">1,000.00</TD>
202
+
203
+ <TD class="ITIRAN_MEI_1" align="right">10,000</TD>
204
+
205
+ </TR>
206
+
207
+ <TR>
208
+
209
+ <TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD>
210
+
211
+ <TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD>
212
+
213
+ <TD class="ITIRAN_MEI_1" align="center">2018/02/28</td>
214
+
215
+ <TD class="ITIRAN_MEI_1" >(株)XXX</TD>
216
+
217
+ <TD class="ITIRAN_MEI_1" ></TD>
218
+
219
+ <TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD>
220
+
221
+ </TR>
222
+
223
+ <TR>
224
+
225
+ <TD class="ITIRAN_MEI_1" align="left">006804</TD>
226
+
227
+ <TD class="ITIRAN_MEI_1">&nbsp;&nbsp;鋼板（寸法）</td>
228
+
229
+ <TD class="ITIRAN_MEI_1" align="right">10.00</TD>
230
+
231
+ <TD class="ITIRAN_MEI_1">個</td>
232
+
233
+ <TD class="ITIRAN_MEI_1" align="right">1,000.00</TD>
234
+
235
+ <TD class="ITIRAN_MEI_1" align="right">10,000</TD>
236
+
237
+ </TR>
238
+
239
+ <TR>
240
+
241
+ <TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD>
242
+
243
+ <TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD>
244
+
245
+ <TD class="ITIRAN_MEI_1" align="center">2018/02/28</td>
246
+
247
+ <TD class="ITIRAN_MEI_1" >(株)XXX</TD>
248
+
249
+ <TD class="ITIRAN_MEI_1" ></TD>
250
+
251
+ <TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD>
252
+
253
+ </TR>
254
+
255
+ <TR>
256
+
257
+ <TD class="ITIRAN_MEI_1" align="left">006804</TD>
258
+
259
+ <TD class="ITIRAN_MEI_1">&nbsp;&nbsp;鋼板（寸法）</td>
260
+
261
+ <TD class="ITIRAN_MEI_1" align="right">10.00</TD>
262
+
263
+ <TD class="ITIRAN_MEI_1">個</td>
264
+
265
+ <TD class="ITIRAN_MEI_1" align="right">1,000.00</TD>
266
+
267
+ <TD class="ITIRAN_MEI_1" align="right">10,000</TD>
268
+
269
+ </TR>
270
+
271
+ <TR>
272
+
273
+ <TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD>
274
+
275
+ <TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD>
276
+
277
+ <TD class="ITIRAN_MEI_1" align="center">2018/02/28</td>
278
+
279
+ <TD class="ITIRAN_MEI_1" >(株)XXX</TD>
280
+
281
+ <TD class="ITIRAN_MEI_1" ></TD>
282
+
283
+ <TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD>
284
+
285
+ </TR>
286
+
287
+ <TR>
288
+
289
+ <TD class="ITIRAN_MEI_1" align="left">006804</TD>
290
+
291
+ <TD class="ITIRAN_MEI_1">&nbsp;&nbsp;鋼板（寸法）</td>
292
+
293
+ <TD class="ITIRAN_MEI_1" align="right">10.00</TD>
294
+
295
+ <TD class="ITIRAN_MEI_1">個</td>
296
+
297
+ <TD class="ITIRAN_MEI_1" align="right">1,000.00</TD>
298
+
299
+ <TD class="ITIRAN_MEI_1" align="right">10,000</TD>
300
+
301
+ </TR>
302
+
303
+ <TR>
304
+
305
+ <TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD>
306
+
307
+ <TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD>
308
+
309
+ <TD class="ITIRAN_MEI_1" align="center">2018/02/28</td>
310
+
311
+ <TD class="ITIRAN_MEI_1" >(株)XXX</TD>
312
+
313
+ <TD class="ITIRAN_MEI_1" ></TD>
314
+
315
+ <TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD>
316
+
317
+ </TR>
318
+
319
+ <TR>
320
+
321
+ <TD class="ITIRAN_MEI_1" align="left">006804</TD>
322
+
323
+ <TD class="ITIRAN_MEI_1">&nbsp;&nbsp;鋼板（寸法）</td>
324
+
325
+ <TD class="ITIRAN_MEI_1" align="right">10.00</TD>
326
+
327
+ <TD class="ITIRAN_MEI_1">個</td>
328
+
329
+ <TD class="ITIRAN_MEI_1" align="right">1,000.00</TD>
330
+
331
+ <TD class="ITIRAN_MEI_1" align="right">10,000</TD>
332
+
333
+ </TR>
334
+
335
+ </TBODY>
336
+
337
+ </TABLE>
338
+
339
+ ```