colspanを使うと正しく表示できない？！

Question

あるwebシステムで現在の予約数を表示するようなhtmlを作成しています。 tableを使って、td内に予約できる数をcolspanで指定して、現在の予約状況がひとめでわかるように表示しているのですがなぜか、正しく表示できなくなってしまいました。ブラウザもie6からie8にはなったのですが。いろいろ検索してみると、似たような質問はたくさんされていましたし、それぞれにwidth指定もすればよい・・・のように記載されていて解決されているようでした。でも、同じように試してみましたがダメでした。（表示結果は同じ）サンプルとしまして、（全体で92がMAXの予約数として　です）　・　・　・のような場合、内の2つめの

日時		50	92		空き
11月26日	0時	55			37
	1時	55			37
	2時	55			37
	3時	70		22
	の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; } を指定したらなんとかうまく表示できました。今回は春頃のバージョンのままで特に変更なく動かせるはずだったのですが。。。そのままではダメなようです。どのような方法があるのかアドバイスいただければと思います。よろしくお願いします。

Tacosan · Accepted Answer

colgroup とか col とかを使ってみる?

ORUKA1951 · Answer

No.4です。後方互換を考えると

日時: 時間予約済み空時間
11月26日: 0時:5537; 1時:6032; 2時:5537; 3時:7022
11月27日: 0時:6032; 1時:4052; 2時:2072; 3時:092

[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 · Answer

この場合、必ず空のセルを入れておかないとダメです。ただ、tableを使用するバーは、以前は良く行われていましたが、この場合はスタイルシートを使ったほうが楽でしょう。＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

日時		50	92		空き
11月26日	0時	55			37
	1時	55			37
	2時	55			37
	3時	70		22
	の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; } を指定したらなんとかうまく表示できました。今回は春頃のバージョンのままで特に変更なく動かせるはずだったのですが。。。そのままではダメなようです。どのような方法があるのかアドバイスいただければと思います。よろしくお願いします。

★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対応のブラウザに限定するなら、要素を使用するのが楽です。

11月26日: 0時:92中55済み37; 1時:92中60済み32; 2時:92中55済み37; 3時:92中70済み22
11月27日: 0時:92中60済み32; 1時:92中40済み52; 2時:92中20済み72; 3時:92中80済み12

上記に対するCSS #orderList dl dt{float:left;} #orderList dl dd{margin-left:5em;}

DOUGLAS_ · Answer

　要するにプログレスバーのようなことをなさりたいかと存じますので、table ではなくて、イメージ等の幅を設定する方法をご紹介いたします。　先ずは、 ●CSSとhtmlと画像1枚で簡単なプログレスバーを作る http://pulltab.info/2010/04/csshtml.html に掲載されたデモページ http://pulltab.info/2010/04/16/ をご覧ください。　上記のページでは、青色の所と灰色の所に、それぞれ幅１ピクセルの画像を配置し、イメージの widht属性を設定することで、プログレスバーの幅を設定しています。　同様に、イメージではなくて水平線（hr）の幅を設定することで、下記のようなこともできます（まぁ、あまりお勧めでもありませんが...）。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

日時		50 92	空き
11月26日	0時	60	32
	1時	70	22
	2時	80	12
	3時	90	2

bvltiggeari · Answer

こんにちは！多分ですが、事前に95個(？)tdを用意してあげれば思った通りの表示になると思います。これはあまりにもテキトーですが…(汗) ・・・・・・・要するに、colspanは事前に用意されているテーブルのtd以上は結合できないってことです。逆に言えば、IE6で表示できていたのはブラウザのバグです。試しに上のtd祭りを入れてあげると思った表示がされると思いますよ♪ あとはCSSなりで見えないように隠せばOKかと…で、いいのかな(^^; 1つの方法として「こんなのもある」程度に思って下さい。

日時		50	92		空き
11月26日	0時	55			37
	1時	55			37
	2時	55			37
	3時	70		22
	の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; } を指定したらなんとかうまく表示できました。今回は春頃のバージョンのままで特に変更なく動かせるはずだったのですが。。。そのままではダメなようです。どのような方法があるのかアドバイスいただければと思います。よろしくお願いします。

colspanを使うと正しく表示できない？！

colgroup とか col とかを使ってみる?

No.4です。

この場合、必ず空のセルを入れておかないとダメです。

要するにプログレスバーのようなことをなさりたいかと存じますので、table ではなくて、イメージ等の幅を設定する方法をご紹介いたします。

こんにちは！

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　要するにプログレスバーのようなことをなさりたいかと存じますので、table ではなくて、イメージ等の幅を設定する方法をご紹介いたします。