- ベストアンサー
colspanを使うと正しく表示できない？！
- あるwebシステムで現在の予約数を表示するようなhtmlを作成しています。tableを使って、td内に予約できる数をcolspanで指定して、現在の予約状況がひとめでわかるように表示しているのですが、なぜか正しく表示できなくなってしまいました。ブラウザもie6からie8にはなったのですが。
- tableのwidthがborderの幅を考慮していないため、幅の指定がうまく行っていない可能性があります。また、テキストの表示位置や背景色の幅に微妙な差があるように見えることも問題です。過去にはwidth無しのcolspan指定だけで表示できていたが、ブラウザのバージョンアップによって表示が崩れてしまった可能性もあります。
- 解決策としては、tableの幅を広めに取ったり、styleを指定したり、widthを具体的に指定する方法があります。特に、table-layout:fixedというスタイルを指定することで、問題が解決する可能性があります。しかし、春頃のバージョンと比べて特に変更がない場合でもうまく動かないことがあるため、他の解決方法を試してみることをおすすめします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.4です。後方互換を考えると <dl id="orderedList"> <dt>日時</dt> <dd>時間<span class="ordered w46">予約済み</span><span class="noorder w46">空時間</span></dd> <dt>11月26日</dt> <dd>0時:<span class="ordered w55">55</span><span class="noorder w37">37</span></dd> <dd>1時:<span class="ordered w60">60</span><span class="noorder w32">32</span></dd> <dd>2時:<span class="ordered w55">55</span><span class="noorder w37">37</span></dd> <dd>3時:<span class="ordered w70">70</span><span class="noorder w22">22</span></dd> <dt>11月27日</dt> <dd>0時:<span class="ordered w60">60</span><span class="noorder w32">32</span></dd> <dd>1時:<span class="ordered w40">40</span><span class="noorder w52">52</span></dd> <dd>2時:<span class="ordered w20">20</span><span class="noorder w72">72</span></dd> <dd>3時:<span class="ordered w0">0</span><span class="noorder w92">92</span></dd> </dl> [CSS] #orderedList{border:solid 1px gray;width:60%;margin:0 auto;font-family:"ＭＳゴシック",monospace;} #orderedList dt{width:6em;float:left;border-top:gray 1px solid} #orderedList dd{margin-left:6em;border:solid 1px silver;padding:0 1em 0 0.5em;} #orderedList dd span{display:inline-block;position:relative;text-align:center;} #orderedList dd span.ordered{background:lime linear-gradient(lime,white,lime);} #orderedList dd span.noorder{background:silver linear-gradient(silver,white,silver);} #orderedList dd span.w0{width:0%;} #orderedList dd span.w1{width:1%;} #orderedList dd span.w2{width:2%;} ・・・【中略】・・・ #orderedList dd span.w89{width:89%;} #orderedList dd span.w90{width:90%;} #orderedList dd span.w91{width:91%;} #orderedList dd span.w92{width:92%;}
お礼
ORUKA1951様 htmlを編集して試してみました。 が、まだ思ったように実現できていません。 時間がかかるようだと他の方法にするかもしれません。 でも、勉強になりました。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
この場合、必ず空のセルを入れておかないとダメです。 <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td> </tr> ただ、tableを使用するバーは、以前は良く行われていましたが、この場合はスタイルシートを使ったほうが楽でしょう。 <table summary="orderList"> ＿<tbody> ＿＿<tr> ＿＿＿<th abbr="date">日時</th><th abbr="ordered">予約状況</td><th abbr="空">空</th> ＿＿</tr> ＿＿<tr> ＿＿＿<th abbr="11月26日" rowspan="3">11月26日</th><td><span class="O-55">55</span></td><td>37</td> ＿＿</tr> ＿＿<tr> ＿＿＿<td><span class="O-60">60</span></td><td>32</td> ＿＿</tr> ＿＿<tr> ＿＿＿<td><span class="O-55">55</span></td><td>37</td> ＿＿</tr> ＿</tbody> </table> ★table,thにはそれぞれsummary,abbrが必須なのでそれを利用してスタイルシートが書いてあります。 に対して、 table[summary="orderList"] th[abbr="ordered"]{width:184px;} table[summary="orderList"] td span{display:inline-block;background-color:red;text-align:right;} table[summary="orderList"] td span.O-1{width:2px;} table[summary="orderList"] td span.O-2{width:4px;} table[summary="orderList"] td span.O-3{width:6px;} ・・・【中略】・・・ table[summary="orderList"] td span.O-58{width:116px;} table[summary="orderList"] td span.O-59{width:117px;} table[summary="orderList"] td span.O-60{width:118px;} なお、HTML5対応のブラウザに限定するなら、<meter>要素を使用するのが楽です。 <dl id="orderdList"> <dt>11月26日</dt> <dd>0時:<meter value=55 max=92>92中55済み</meter>37</dd> <dd>1時:<meter value=60 max=92>92中60済み</meter>32</dd> <dd>2時:<meter value=55 max=92>92中55済み</meter>37</dd> <dd>3時:<meter value=70 max=92>92中70済み</meter>22</dd> <dt>11月27日</dt> <dd>0時:<meter value=60 max=92>92中60済み</meter>32</dd> <dd>1時:<meter value=40 max=92>92中40済み</meter>52</dd> <dd>2時:<meter value=20 max=92>92中20済み</meter>72</dd> <dd>3時:<meter value=80 max=92>92中80済み</meter>12</dd> </dl> 上記に対するCSS #orderList dl dt{float:left;} #orderList dl dd{margin-left:5em;}
お礼
引き続き、ORUKA1951様 最初に空の<td>を個数分書いてみましたところ、うまく表示できました。 まだその部分を消すことはできていません。 tableの先頭にちょっと隙間が表示されますが、最悪、このままでもいけそうです。 スタイルシートはまだイマイチ苦手なので、うまく活用できません。。。 html5対応のブラウザ限定にはできない仕様になっています。 時間も限られていますので、他の方法でダメだった場合 これでいこうかと思っています。 ありがとうございました。
- DOUGLAS_
- ベストアンサー率74% (397/534)
要するにプログレスバーのようなことをなさりたいかと存じますので、table ではなくて、イメージ等の幅を設定する方法をご紹介いたします。 先ずは、 ●CSSとhtmlと画像1枚で簡単なプログレスバーを作る http://pulltab.info/2010/04/csshtml.html に掲載されたデモページ http://pulltab.info/2010/04/16/ をご覧ください。 上記のページでは、青色の所と灰色の所に、それぞれ幅１ピクセルの画像を配置し、イメージの widht属性 を設定することで、プログレスバーの幅を設定しています。 同様に、イメージではなくて水平線（hr）の幅を設定することで、下記のようなこともできます（まぁ、あまりお勧めでもありませんが...）。 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> hr.prog {position: absolute; z-index: -1; align: left; color: red; height: 20;}; </style> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" align="center">日時</td> <td><hr class="prog" width="50"> 50    92</td> <td width="35" size="50" align="center" bgcolor="#ffd37d">空き</td> </tr> <tr> <td rowspan="12" width="65" align=center valign=top>11月26日</td> <td align=center width="45">0時</td> <td><hr class="prog" width="60"> 60</td> <td align="right"><font color=navy>32</font></td> </tr> <tr> <td align=center>1時</td> <td><hr class="prog" width="70"> 70</td> <td align="right"><font color=navy>22</font></td> </tr> <tr> <td align=center>2時</td> <td><hr class="prog" width="80"> 80</td> <td align="right"><font color=navy>12</font></td> </tr> <tr> <td align=center>3時</td> <td><hr class="prog" width="90"> 90</td> <td align="right"><font color=navy> 2</font></td> </tr>
お礼
DOUGLAS_様 一番最初（スクラッチ時）、画像を使って・・・と、考えたこともあります。 でも、簡単な（？）方法をまわりの人たちから教えられ、今に至っています。 時間があればやってみたいのですが、 とりあえず今、すぐに動く（表示できる）モノを作らなければならないので 他の方法をまず試してみます。 ありがとうございました！
- bvltiggeari
- ベストアンサー率76% (33/43)
こんにちは！ 多分ですが、事前に95個(？)tdを用意してあげれば 思った通りの表示になると思います。 これはあまりにもテキトーですが…(汗) <table width="319" border="1" cellpadding="0" cellspacing="0"> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td width="100" height="25" colspan="2" align="center">日時</td> <td width="100" colspan="50" align=right>50</td> <td width="84" colspan="42" align=right>92</td> <td width="35" height="25" align="center" bgcolor="#ffd37d">空き</td> </tr> ・・・・・・・ 要するに、colspanは事前に用意されているテーブルのtd以上は 結合できないってことです。 逆に言えば、IE6で表示できていたのはブラウザのバグです。 試しに上のtd祭りを入れてあげると思った表示がされると思いますよ♪ あとはCSSなりで見えないように隠せばOKかと…で、いいのかな(^^; 1つの方法として「こんなのもある」程度に思って下さい。
お礼
bvltiggeari様 IE6のバグだなんて、、、ほんと悲しくて困ったものです。 そういう作りをしてしまった自分のせいですが。(^^; 他にもIE8になったらうまく表示できない箇所がたくさんあり、（; _ ;）状態です。 空の<td>を数分いれたら、うまく表示できました。 他の方法でダメだったら、これでいこうかと思っています。 有難うございました！
お礼
Tacosan様 colgroup・・・使ったことがありませんでした。 調べて、htmlを編集して表示させてみたところ、 最初に <colgroup span="2" width="100"> <colgroup span="92" width="92"> <colgroup span="1" width="35"> を入れただけで、ちゃんと表示できました！ 散々、悩んだのでちょっと感激です(^^) ホントにこれだけでいいのか、まだ不安もあるのですが 修正量も少ないし、この方法にしてみます。 有難うございました！