Q&A
「崩れ」とは具体的にはどのような表示ですか？
昔書いたHTMLがあるのですが、レイアウトが崩れるためIEの互換オプションを利用していますが、
互換オプションを利用しなくても崩れないのとCrome/IEどちらでも見れるように変えたいです。
どのように修正するのが適切でしょうか？
＜崩れ＞
＜表示イメージ＞
<COL span="72" width="10"> ↓ <COL span="72" style="width:720px"> に変えたのですが、cromeではそれなりに崩れなくなったのに対し、IEでおかしくなりました。 スクロールの出る分だけ縮まっています。<!-- 明細タイトル --> <TABLE class="TBL_SEARCH"> <COL span="72" width="10"> <TBODY> <TR> <TD class="ITIRAN_HED" colspan="3" rowspan="2"> <TD class="ITIRAN_HED" colspan="7" rowspan="2">見積№</TD> <TD class="ITIRAN_HED" colspan="7">見積日</TD> <TD class="ITIRAN_HED" colspan="30">得意先</TD> <TD class="ITIRAN_HED" colspan="17"></TD> <TD class="ITIRAN_HED" colspan="8">税抜合計金額</TD> </TR> <TR> <TD class="ITIRAN_HED" colspan="7">品番</TD> <TD class="ITIRAN_HED" colspan="30">品名</TD> <TD class="ITIRAN_HED" colspan="7">数量</TD> <TD class="ITIRAN_HED" colspan="3">単位</TD> <TD class="ITIRAN_HED" colspan="7">単価</TD> <TD class="ITIRAN_HED" colspan="8">税抜金額</TD> </TR> </TBODY> </TABLE> <!-- 明細 --> <DIV style="height:308px; overflow-y:scroll;" id="detailList"> <TABLE class="TBL_SEARCH"> <COL span="72" width="10"> <TBODY> <TR> <TD class="ITIRAN_MEI_1" colspan="3" rowspan="2" align="center" valign="top"></TD> <TD class="ITIRAN_MEI_1" colspan="7" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD> <TD class="ITIRAN_MEI_1" colspan="7" align="center">2018/02/28</td> <TD class="ITIRAN_MEI_1" colspan="30">(株)XXX</TD> <TD class="ITIRAN_MEI_1" colspan="17"></TD> <TD class="ITIRAN_MEI_1" colspan="8" align="right">10,000.00</TD> </TR> <TR> <TD class="ITIRAN_MEI_1" colspan="7" align="left">006804</TD> <TD class="ITIRAN_MEI_1" colspan="30"> 鋼板（寸法）</td> <TD class="ITIRAN_MEI_1" colspan="7" align="right">10.00</TD> <TD class="ITIRAN_MEI_1" colspan="3">個</td> <TD class="ITIRAN_MEI_1" colspan="7" align="right">1,000.00</TD> <TD class="ITIRAN_MEI_1" colspan="8" align="right">10,000</TD> </TR> </TBODY> </TABLE> </DIV>
上記のようなコードがかなりあるため、最小限の手直しで調整したいです。
どなたか教えてください。
崩れについては、キャプチャをいただけると、回答を得られやすくなります。 また、質問文のコードは、コードブロックで囲んでもらえますか。https://teratail.com/help#about-markdown
幅が予想の幅にならず、縮んだり伸びたりします。
「予想の幅」とは具体的には何の幅でどれぐらいですか？ 表全体が720pxということでいいですか？
全体が720pxでそれぞれの項目で適切な幅にしたいです
> 上記のようなコードがかなりあるため、最小限の手直しで調整したいです。 全ての表の構成がご提示の構造であると考えてよいのですか？（全て確認しましたか？）
はい、そうです
なるほど, Chromeだとcol要素のサポートが限定的すぎると(方眼紙tableは痺れるなぁ)
提示のコード部分だけでも、関連のCSSを全て提示して貰えれば、CSSの追加・変更でいけるかも知れません。
回答3件
0
テーブルヘッダと本体を切り分ける必要はあるのでしょうか？
（縦スクロールを出したいということ？）
colspanで意味なく列をまとめるのはナンセンスだと思います
複数列にまたがるものでなければcolspan設定を外したほうがよいでしょう
sample
以前書いてあまり美しくないので推奨はしていないですが
以下のようにすればヘッダ固定できます
（IE8以上、firefox、chromeで動作確認）
CSS
1/* 最低限の設定 */ 2table{border-collapse:collapse;} 3th,td{border:1px solid #000000;}
javascript
1/* jQuery */ 2$(function(){ 3 $('.table-scroll').each(function(){ 4 $(this).wrap($('<div>').addClass('scroll-parent')).wrap($('<div>').addClass('scroll-child')); 5 $(this).clone(true).removeClass('table-scroll').addClass('scroll-head').appendTo($(this).closest('.scroll-parent')); 6 $(this).closest('.scroll-parent').find('.scroll-head').css('top',$(this).closest('.scroll-parent').offset().top); 7 $('.scroll-child').css({"height":"300px","overflow-y":"scroll","overflow-x":"hidden","position":"relative"}); 8 $('.scroll-head').css({"position":"absolute"}); 9 $('.scroll-head thead').css({"background-Color":"red"}); 10 $('.scroll-head tbody').css({"visibility":"collapse","background-Color":"red"}); 11 }); 12});
HTML
1 2<!-- 3スクロールを付けたいテーブルにtable-scrollクラスを付加 42行目以降はダミー用にコピーしてあります 5--> 6<TABLE class="TBL_SEARCH table-scroll"> 7<THEAD> 8<TR> 9<TD rowspan="2"> </TD> 10<TD rowspan="2">見積№</TD> 11<TD>見積日</TD> 12<TD>得意先</TD> 13<TD></TD> 14<TD colspan="3">税抜合計金額</TD> 15</TR> 16<TR> 17<TD>品番</TD> 18<TD>品名</TD> 19<TD>数量</TD> 20<TD>単位</TD> 21<TD>単価</TD> 22<TD>税抜金額</TD> 23</TR> 24</THEAD> 25<TBODY> 26<TR> 27<TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD> 28<TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD> 29<TD class="ITIRAN_MEI_1" align="center">2018/02/28</td> 30<TD class="ITIRAN_MEI_1" >(株)XXX</TD> 31<TD class="ITIRAN_MEI_1" ></TD> 32<TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD> 33</TR> 34<TR> 35<TD class="ITIRAN_MEI_1" align="left">006804</TD> 36<TD class="ITIRAN_MEI_1"> 鋼板（寸法）</td> 37<TD class="ITIRAN_MEI_1" align="right">10.00</TD> 38<TD class="ITIRAN_MEI_1">個</td> 39<TD class="ITIRAN_MEI_1" align="right">1,000.00</TD> 40<TD class="ITIRAN_MEI_1" align="right">10,000</TD> 41</TR> 42<TR> 43<TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD> 44<TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD> 45<TD class="ITIRAN_MEI_1" align="center">2018/02/28</td> 46<TD class="ITIRAN_MEI_1" >(株)XXX</TD> 47<TD class="ITIRAN_MEI_1" ></TD> 48<TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD> 49</TR> 50<TR> 51<TD class="ITIRAN_MEI_1" align="left">006804</TD> 52<TD class="ITIRAN_MEI_1"> 鋼板（寸法）</td> 53<TD class="ITIRAN_MEI_1" align="right">10.00</TD> 54<TD class="ITIRAN_MEI_1">個</td> 55<TD class="ITIRAN_MEI_1" align="right">1,000.00</TD> 56<TD class="ITIRAN_MEI_1" align="right">10,000</TD> 57</TR> 58<TR> 59<TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD> 60<TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD> 61<TD class="ITIRAN_MEI_1" align="center">2018/02/28</td> 62<TD class="ITIRAN_MEI_1" >(株)XXX</TD> 63<TD class="ITIRAN_MEI_1" ></TD> 64<TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD> 65</TR> 66<TR> 67<TD class="ITIRAN_MEI_1" align="left">006804</TD> 68<TD class="ITIRAN_MEI_1"> 鋼板（寸法）</td> 69<TD class="ITIRAN_MEI_1" align="right">10.00</TD> 70<TD class="ITIRAN_MEI_1">個</td> 71<TD class="ITIRAN_MEI_1" align="right">1,000.00</TD> 72<TD class="ITIRAN_MEI_1" align="right">10,000</TD> 73</TR> 74<TR> 75<TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD> 76<TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD> 77<TD class="ITIRAN_MEI_1" align="center">2018/02/28</td> 78<TD class="ITIRAN_MEI_1" >(株)XXX</TD> 79<TD class="ITIRAN_MEI_1" ></TD> 80<TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD> 81</TR> 82<TR> 83<TD class="ITIRAN_MEI_1" align="left">006804</TD> 84<TD class="ITIRAN_MEI_1"> 鋼板（寸法）</td> 85<TD class="ITIRAN_MEI_1" align="right">10.00</TD> 86<TD class="ITIRAN_MEI_1">個</td> 87<TD class="ITIRAN_MEI_1" align="right">1,000.00</TD> 88<TD class="ITIRAN_MEI_1" align="right">10,000</TD> 89</TR> 90<TR> 91<TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD> 92<TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD> 93<TD class="ITIRAN_MEI_1" align="center">2018/02/28</td> 94<TD class="ITIRAN_MEI_1" >(株)XXX</TD> 95<TD class="ITIRAN_MEI_1" ></TD> 96<TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD> 97</TR> 98<TR> 99<TD class="ITIRAN_MEI_1" align="left">006804</TD> 100<TD class="ITIRAN_MEI_1"> 鋼板（寸法）</td> 101<TD class="ITIRAN_MEI_1" align="right">10.00</TD> 102<TD class="ITIRAN_MEI_1">個</td> 103<TD class="ITIRAN_MEI_1" align="right">1,000.00</TD> 104<TD class="ITIRAN_MEI_1" align="right">10,000</TD> 105</TR> 106<TR> 107<TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD> 108<TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD> 109<TD class="ITIRAN_MEI_1" align="center">2018/02/28</td> 110<TD class="ITIRAN_MEI_1" >(株)XXX</TD> 111<TD class="ITIRAN_MEI_1" ></TD> 112<TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD> 113</TR> 114<TR> 115<TD class="ITIRAN_MEI_1" align="left">006804</TD> 116<TD class="ITIRAN_MEI_1"> 鋼板（寸法）</td> 117<TD class="ITIRAN_MEI_1" align="right">10.00</TD> 118<TD class="ITIRAN_MEI_1">個</td> 119<TD class="ITIRAN_MEI_1" align="right">1,000.00</TD> 120<TD class="ITIRAN_MEI_1" align="right">10,000</TD> 121</TR> 122<TR> 123<TD class="ITIRAN_MEI_1"rowspan="2" align="center" valign="top"></TD> 124<TD class="ITIRAN_MEI_1" rowspan="2" align="center" valign="top"><A href="#">1000010-1</A><BR>承認</TD> 125<TD class="ITIRAN_MEI_1" align="center">2018/02/28</td> 126<TD class="ITIRAN_MEI_1" >(株)XXX</TD> 127<TD class="ITIRAN_MEI_1" ></TD> 128<TD class="ITIRAN_MEI_1" colspan="3" align="right">10,000.00</TD> 129</TR> 130<TR> 131<TD class="ITIRAN_MEI_1" align="left">006804</TD> 132<TD class="ITIRAN_MEI_1"> 鋼板（寸法）</td> 133<TD class="ITIRAN_MEI_1" align="right">10.00</TD> 134<TD class="ITIRAN_MEI_1">個</td> 135<TD class="ITIRAN_MEI_1" align="right">1,000.00</TD> 136<TD class="ITIRAN_MEI_1" align="right">10,000</TD> 137</TR> 138</TBODY> 139</TABLE>
投稿2018/03/06 07:59
編集2018/03/06 08:21
総合スコア114784
0
とりあえずで良ければ、提示コードをCSSのみで強引なものですが･･･幅や罫線等は調整してみてください。
CSS
1.TBL_SEARCH { 2 width: 720px; 3} 4 5.ITIRAN_HED,.ITIRAN_MEI_1 { 6 border: 1px solid #000; 7} 8 9tr:nth-child(1) td:nth-child(1) { 10 width: 3%; 11} 12 13tr:nth-child(1) td:nth-child(2) { 14 width: 15%; 15} 16 17tr:nth-child(1) td:nth-child(3) { 18 width: 15%; 19} 20 21tr:nth-child(1) td:nth-child(4) { 22 width: 18%; 23} 24 25tr:nth-child(1) td:nth-child(6) { 26 width: 18%; 27}
投稿2018/03/07 09:27
総合スコア3523
0
スクリプトを流して列幅固定専用のダミーtrノードを構成してcol要素の代わりとする方法など如何でしょう?
※Chromeでのみ動作を確認しているので, IEで不具合が出る場合は適当に条件判定して実行しないようにして下さい.
JavaScript
1document.addEventListener("DOMContentLoaded", function(e){ 2 var cols = document.getElementsByTagName("col"); 3 var th = "<th style='width:10px;'></th>"; 4 for(var i = 0, len = cols.length; i<len; i++){ 5 var col = cols[i]; 6 var table = col.parentNode.parentNode;//col->colgroup->table 7 var thead = document.createElement("thead"); 8 thead.style.height = "0"; 9 var tr = document.createElement("tr"); 10 var ths = ""; 11 for(var j = 0, span = parseInt(col.getAttribute("span")); j<span; j++){ 12 ths += th; 13 } 14 tr.innerHTML = ths; 15 thead.appendChild(tr); 16 table.appendChild(thead); 17 } 18}); 19
投稿2018/03/06 09:05
総合スコア4756
ありがとうございます。かなり作業が楽になります。
ただ、明細にスクロールがある分、ヘッダーの列位置と若干ずれてしまうのですが、やはり同じtable内にしておくべきでしょうか？
>やはり同じtable内にしておくべきでしょうか？
そこは工数との兼ね合いかと思います.
既存の構成を最大限活かすのであれば, 動的にスクロールバーの幅を求め, その幅をもとに明細部のサイズを調整する手法もとれようかと思います.
あなたの回答
tips
プレビュー
