![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
あるwebシステムで
現在の予約数を表示するようなhtmlを作成しています。
tableを使って、td内に予約できる数をcolspanで指定して、
現在の予約状況がひとめでわかるように表示しているのですが
なぜか、正しく表示できなくなってしまいました。
ブラウザもie6からie8にはなったのですが。
いろいろ検索してみると、似たような質問はたくさんされていましたし、
それぞれにwidth指定もすればよい・・・のように記載されていて解決されているようでした。
でも、同じように試してみましたがダメでした。(表示結果は同じ)
サンプルとしまして、(全体で92がMAXの予約数として です)
<table width="319" border="1" cellpadding="0" cellspacing="0">
<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>
<tr>
<td rowspan="12" width="55" align=center valign=top>11月26日</td>
<td width="45" align=center>0時</td>
<td width="110" colspan="55" bgcolor="#ff4500" align="center">55</td>
<td width="74" colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>
<tr>
<td width="45" align=center>1時</td>
<td colspan="55" bgcolor="#ff4500"align="center">55</td>
<td colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>
<tr>
<td width="45" align=center>2時</td>
<td colspan="55" bgcolor="#ff4500" align="center">55</td>
<td colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>
<tr>
<td width="45" align=center>3時</td>
<td colspan="70" bgcolor="#ff4500" align="center">70</td>
<td colspan="22" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>22</font></td>
</tr>
・
・
・
のような場合、<tr>内の2つめの<td>のcolspan=70も55も同じ幅で表示されます。
違う・・・といえば、align=centerでそれぞれ数字を表示させていますが
55のテキストが少し左寄り、70がcenterに表示されてるように見えます。
また、赤背景色の幅も微妙に0.xミリくらいは colspan=70の方が広いです。
tableのwidthがborderの幅を考慮していないのですが
これも問題でしょうか?
みなさん、似たような問題がでても解決されているようなのですが
自分の場合、どうやってもなかなか解決できません。
tableの幅を広めに取ったり、style指定したり、widthを入れたり・・・
因みに依然(今年の春頃まで?)は、width無しのcolspan指定だけで、
思い通りに表示できていました。
その後、ブラウザのバージョンアップがありました。
最初(春頃)はstyleで
table{
table-layout:fixed;
}
を指定したらなんとかうまく表示できました。
今回は春頃のバージョンのままで特に変更なく動かせるはずだったのですが。。。
そのままではダメなようです。
どのような方法があるのかアドバイスいただければと思います。
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
colgroup とか col とかを使ってみる?
Tacosan様
colgroup・・・使ったことがありませんでした。
調べて、htmlを編集して表示させてみたところ、
最初に
<colgroup span="2" width="100">
<colgroup span="92" width="92">
<colgroup span="1" width="35">
を入れただけで、ちゃんと表示できました!
散々、悩んだのでちょっと感激です(^^)
ホントにこれだけでいいのか、まだ不安もあるのですが
修正量も少ないし、この方法にしてみます。
有難うございました!
No.5
- 回答日時:
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:"MSゴシック",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を編集して試してみました。
が、まだ思ったように実現できていません。
時間がかかるようだと他の方法にするかもしれません。
でも、勉強になりました。
ありがとうございました。
No.4
- 回答日時:
この場合、必ず空のセルを入れておかないとダメです。
<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対応のブラウザ限定にはできない仕様になっています。
時間も限られていますので、他の方法でダメだった場合
これでいこうかと思っています。
ありがとうございました。
No.3
- 回答日時:
要するにプログレスバーのようなことをなさりたいかと存じますので、table ではなくて、イメージ等の幅を設定する方法をご紹介いたします。
先ずは、
●CSSとhtmlと画像1枚で簡単なプログレスバーを作る
http://pulltab.info/2010/04/csshtml.html
に掲載されたデモページ
http://pulltab.info/2010/04/16/
をご覧ください。
上記のページでは、青色の所と灰色の所に、それぞれ幅1ピクセルの画像を配置し、イメージの 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_様
一番最初(スクラッチ時)、画像を使って・・・と、考えたこともあります。
でも、簡単な(?)方法をまわりの人たちから教えられ、今に至っています。
時間があればやってみたいのですが、
とりあえず今、すぐに動く(表示できる)モノを作らなければならないので
他の方法をまず試してみます。
ありがとうございました!
No.1
- 回答日時:
こんにちは!
多分ですが、事前に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>を数分いれたら、うまく表示できました。
他の方法でダメだったら、これでいこうかと思っています。
有難うございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルのヘッダとボディの幅...
-
CSSだけで<table>の<td>や<tr>...
-
中に<table></table>が使えるア...
-
TRタグの余白をcssで設定するには
-
テーブルの行を折りたたみたい...
-
表の一部を結合するには?
-
tableにul,または,olを入れられ...
-
<COLGROUP>の使い方が理解でき...
-
表の1列だけをCSSを使って右揃...
-
エクセルをhtml変換した、html...
-
POSTによるファイル・アッ...
-
tableレイアウトをcssで軽くで...
-
テーブルの行の高さを指定する...
-
テーブルの任意の列を非表示に...
-
dreamweaverで本文を2段組にす...
-
HTMLで文とテーブルの間が空く。
-
ホームページにのせる表(内側...
-
cssで、表示されるテキストによ...
-
HTMLのテーブルで桁をそろ...
-
特定のテーブルのみ枠線の色を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
中に<table></table>が使えるア...
-
HTMLのテーブルで桁をそろ...
-
HTML <td></td>タグ セル内余...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
ホームページ 表の上の余白を...
-
逆L字の表(table)組み
-
スタイルシートで colspan=3と...
-
テーブルタグのセルの幅の一部...
-
テーブルの行の高さを指定する...
-
テーブルのセルにアンカー
-
表の1列だけをCSSを使って右揃...
-
テーブルの装飾
-
tableでcolspanを使うと次行以...
おすすめ情報