WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:TABLEタグでの表示不正

0:[投稿] のぐりん [MAIL] [2003/02/27 12:34 ][環境:IE5.5以上 Windows全般 ASP IIS4.0以上]

お疲れ様です。のぐりんです。

<TABLE>タグを利用して、表形式でデータを表示しているページがあります。
具体的な数値はわかりませんが、表示するデータ量が多い場合、
スペックの悪いマシンだと以下のような現象が発生します。
1、表示すべき任意の1行が表されないことがある。
2、BORDERで指定した線が表示されないことがある。

いずれも、右クリックでソースを確認すると、正しく書かれています。

以下の観点で調査しようと思いますが、何か情報をお持ちの方がいらっしゃったら、教えてください。

1、Microsoftサポート情報にそういうことに関する情報が載っていないか?(現在、探しきれていません。)
2、IEのTABLEタグ解釈に問題はないか?(CSSと併用した場合など)
3、CPU、メモリ、グラフィックメモリ等のスペックによる現象発生の違い


1:[回答] Yachimata [MAIL] [2003/02/27 13:32 ]

こんにちは。

Yachimataも似たような現象に遭遇した事があります。
が、はっきりとした原因は分かりません。

その時は、Web全般に詳しい先輩に
『Web画面はエクセルのような表形式で大量のデータ表示をするように作られて居ないから出来ないのが当たり前。それは画面設計から間違ってるんだよ。』
と言われてしまい、見直しを図りました。

その時の画面はレコードに10フィールドあり、全てにコンボボックスがあるというパターンで、何十行も出力される可能性がありました。
コンボボックスは中でも大量にメモリを消費するオブジェクトだそうです。その時は合計で20個のコンボボックスを表示するので精一杯のようでした。

ただのテキストであれば大量に表示出来るのですが、テキストボックスや、コンボボックスとなると流石に限界があるようです。

のぐりんさんの状況で許されるかは分かりませんが、最低限のデータ数に押さえる、行数を押さえる、区分け出来るデータは別画面に分ける、等など・・・・・・一度画面設計から見直してみるのはどうでしょうか。


2:[回答] のぐりん [MAIL] [2003/02/27 14:18 ]

回答ありがとうございます。
表には、テキストのみですが、各セルのバックグラウンドの色を変えたり、字を太字で表示したりしています。
現在、行数は無制限です。

『Web画面はエクセルのような表形式で大量のデータ表示をするように作られて居ないから出来ないのが当たり前。』の根拠になっているようなMicrosoftのWEBページなどありませんでしょうか?
「最低限のデータ数に押さえる、行数を押さえる」にしても、根拠が必要です。(画面デザインそのものは、発注元が作成していますので)

ただ、この現象の頻度がCPUやメモリだけじゃないような気がしています。CPUやメモリのスペックの悪いマシンでも、現象が出ないものは、全然でないので、どのスペックを気にしたらよいのか悩みどころです。


3:[回答] yuu [2003/02/27 14:35 ]

スペックに関わらず、IEはどうもborderの表示は不安定な感がありますね。
弊社(何処)のニュースなんかも、出て欲しい線が出たり出なかったりします。まあこだわりませんが(謎)。
http://www.b-architects.com/news/
CSSを切れば常にちゃんと出るので、CSSレンダリングの実装がアレ(どれ)なんじゃないかと思ったり。

根拠になるMSKBなんかはよくわかりませんが、まあどっかにあるのだと思います。折りを見て調べてみましょう。


4:[回答] Yachimata [MAIL] [2003/02/27 14:45 ]

私も、スペックっぽいな・・・とは思ってたんですが、具体的にどのスペックなのかは判断付きませんでした。

でも、例えスペック改善で現象を押さえる事が出来たとしても、そのページを見る人がそのスペックを有しているとはかぎら・・・・・・

あ、もしかして不特定多数ではなく、特定小数限定のページなのでしょうか。
スペックでカバー出来るなら、端末の方のスペックアップでの対応が可能という事でしょうか。

我々の場合はもう「このレイアウトじゃ表示出来ません、変更しましょう!」とユーザーに言って聞き入れて貰えました。
今思えばラッキーというか、恵まれてましたね。


5:[質問] のぐりん [MAIL] [2003/02/27 15:07 ]

イメージ的には、イントラネット用のパッケージソフトなんで、「不特定多数」と考えたほうがいいでしょう。(IEのバージョン等は制限していますが、、、)

yuuさんの言うとおり、CSSの実装の仕方がまずいのかも知れませんね。
現象が現れる一部のページのCSSです。
<style media="screen" type="text/css">
<!--
body { font-size: small; }
td { font-size: x-small; height: 22px; }
a { text-decoration: none; }
td.title { color : white; background-color : #696969; }
font.bu { font-size : 12pt; color : #ccffcc; font-weight : bold; }
font.ka { font-size : 12pt; color : #e0ffff; font-weight : bold; }
td.kako { background-color : #c0c0c0; }
td.now { background-color : white; }
td.mirai { background-color : #e7e7e7; }
td.kan { background-color : #808080; color : white; font-weight : bold; }
td.taisak { background-color : #695acd; color : white; font-weight : bold; }
td.mityak { background-color : #cd5c5c; color : white; font-weight : bold; }
td.pend { background-color : white; color : #808080; font-weight : bold; border-width : 2px 2px 2px 2px; border-style : solid solid solid solid; border-color : #808080 #808080 #808080 #808080; }
td.pendR { background-color : white; color : #808080; font-weight : bold; border-width : 2px 2px 2px 2px; border-top-style : solid; border-right-style : solid; border-bottom-style : solid; border-left-style : none; border-color : #808080 #808080 #808080 #808080; }
td.pendL { background-color : white; color : #808080; font-weight : bold; border-width : 2px 2px 2px 2px; border-top-style : solid; border-right-style : none; border-bottom-style : solid; border-left-style : solid; border-color : #808080 #808080 #808080 #808080; }
td.pendTB { background-color : white; color : #808080; font-weight : bold; border-width : 2px 2px 2px 2px; border-top-style : solid; border-right-style : none; border-bottom-style : solid; border-left-style : none; border-color : #808080 #808080 #808080 #808080; }
td.kisok { background-color : white; color : #000000; font-weight : bold; border-width : 2px 2px 2px 2px; border-style : solid solid solid solid; border-color : #000000 #000000 #000000 #000000; }
td.kisokR { background-color : white; color : #000000; font-weight : bold; border-width : 2px 2px 2px 2px; border-top-style : solid; border-right-style : solid; border-bottom-style : solid; border-left-style : none; border-color : #000000 #000000 #000000 #000000; }
td.kisokL { background-color : white; color : #000000; font-weight : bold; border-width : 2px 2px 2px 2px; border-top-style : solid; border-right-style : none; border-bottom-style : solid; border-left-style : solid; border-color : #000000 #000000 #000000 #000000; }
td.kisokTB { background-color : white; color : #000000; font-weight : bold; border-width : 2px 2px 2px 2px; border-top-style : solid; border-right-style : none; border-bottom-style : solid; border-left-style : none; border-color : #000000 #000000 #000000 #000000; }
td.space { background-color : #eeeeee; height : 2px; }
td.stspace { background-color : #eeeeee; height : 0px; }
td.nullcol { background-color : #eeeeee; }
-->
</style>
  :
<TABLE border="0" width="820" cellpadding="0" cellspacing="2" style="table-layout:fixed;">

どこか、ますいところがありますか?

現在は、仮リリース済みなので、対策より先に「調査」を優先されています。マシンのスペックのみならず、IEのバージョン(パッチ含む)やOSのバージョン(SP含む)で調査してみようと思います。


6:[回答] ひじ [2003/02/27 15:44 ]

>style="table-layout:fixed;"
table-layoutプロパティの意味を理解して使用していますか?
「固定レイアウトアルゴリズム(the fixed table layout algorithm)」の意味を説明できますか?


7:[回答] のぐりん [MAIL] [2003/02/27 16:39 ]

>table-layoutプロパティの意味を理解して使用していますか?
テーブルのレイアウト方法で、高さや幅を固定にするのが、fixedだと思っています。

>「固定レイアウトアルゴリズム(the fixed table layout algorithm)」の意味を説明できますか?

この言葉は知りませんでした。
以下のページで、
・オーサーが列のサイズを指定し、表のセルの中のコンテンツのサイズが表のレイアウトに影響を与えないという点
・ページのロードが高速化される。
等の情報を得ています。
http://www.microsoft.com/japan/msdn/web/ie/ie50/ie5over.asp

table-layout:fixed;が何か悪さをしているのでしょうか?
(幅をしたいので、この値は変更したくないのですが、、、)


8:[回答] Yachimata [MAIL] [2003/02/27 17:25 ]

Yachimataは table-layout を使ったことは有りませんが、固定レイアウトアルゴリズムという言葉も知りませんでした。

ちょっと検索して見たところ、以下のアドレスのページに

『列幅が狭すぎる場合は、列ごと消すことになったり・・・』

と記述されていました。
本当にこれが原因かどうかはわかりませんが、しっかりと理解して使わないと、悪さしてしまう事があるようですね。

http://www6.plala.or.jp/go_west/css2/ref/p_tb_lo.htm


9:[関連] ひじ [2003/02/27 22:37 ]

http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/tables.html#width-layout
あたり。

table-layout:fixed でかつ表全体の幅が指定されている場合、固定レイアウトアルゴリズムが用いられる。固定レイアウトアルゴリズムでは、列要素(HTMLではcol要素)のwidthがauto以外のときはそのwidth値が使用され、そうでない場合は表の1列目のwidth値を用いて各列の幅が決定される。それで列の幅が決定できない場合は、残りの各列に均等に幅が配分される。

俗にtable-layout:fixedが高速といわれるのは、表の1列目を読み込んだだけで表全体の各列の幅を決定できるため、逐次レイアウトが可能だから。
表全体の幅を指定しなければ、table-layout:fixedは意味がないことと、列の幅を指定していなければ、全ての列がその内容によらず等しい幅になることに注意。

と、ここまで書いてみたが、 >>0 の現象と何が関係があるのか分からなくなったので、statusを関連にして投稿。


10:[回答] のぐりん [MAIL] [2003/02/28 11:55 ]

Yachimataさん、ひじさん、有用なページありがとうございます。

ざっと、見たところ、table-layout:fixedが悪さしている可能性は否定できないですね。
尚、列内の文字列は列幅に収まるようASP内で制御していますので、
列幅を超えるデータは存在しません。
ただ、データ内容により、ColSpanを変更しながら、テーブルを書いています。よって、セルの数も列×行で固定ではありません。
この辺が悪さしている可能性はありますか?


11:[完了] のぐりん [MAIL] [2003/03/06 11:37 ]

IE5.5SP2、IE6.0、IE6.0SP1でテストしてみた結果、表示崩れを起こすのは、IE6.0のみと判明しました。
いろいろ、理由はあるかもしれませんが、IE6.0のみということで、IE6.0の「バグ」ということで、片付けようと思います。
Microsoftのサポートページには、その件は載っていませんでしたが、IE6.0からIE6.0SP1の間で、対応されたものと判断します。

とりあえずは、完了とします

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World