WEB相談室

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

タイトル:Windowより大きいTableの幅固定

0:[投稿] Aki [2002/07/16 22:10 ][環境:WIN+IE UNIX系+OTHER]

お世話になります。Akiです。

以下のようなソースを記述したのですが、Window幅よりも大きいTableのセル幅を固定の大きさで表示することが出来ません。

nowrapとそうでないthタグが混在するTableで、たとえWindow幅より広い表示になったとしても(水平スクロール表示されたとしても)、cssで指定したWidthで表示させたいのですが…。

ご教授よろしくお願いします。

以下ソースです。

--- Source Begin ---
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>test</title>
<style type="text/css">
th.fix{
    color: inherit;
    background-color: #DDD;
    font-weight: bold;
    text-align:center;
    width: 10em;
    }
th.variable{color: inherit;
    background-color: #DDD;
    font-weight: bold;
    text-align:center;
    white-space: nowrap;
    }
td{
    color: inherit;
    background-color: #fff;
    font-weight: normal;
    text-align:center;
    white-space: nowrap;
    }
</style>
</head>
<body>
<table border="1">
  <tr>
    <th class="variable">あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん</th>
    <th class="fix">テスト</th>
    <th class="fix">あいうえお</th>
  </tr>
  <tr>
    <td>あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ</td>
    <td>あいうえお</td>
    <td>あ</td>
  </tr>
</table>
</body>
</html>
--- Source End ---


1:[回答] EYE's [MAIL] [2002/07/17 11:20 ]

どうしてもスタイルシートで固定させたいということでしょうか?
テーブルBOXにとどまらず、スタイルシート非対応のブラウザはターゲットでなければ、table{width:600px;}などでできますが、はみでてしまう部分はこの指定だけですと見えなくなってしまいますので、周りこみ解除の要素を一緒にいれればOKです。
あと、もし、スタイルシート非対応のブラウザがターゲットの中に入っているなら、
<table border="1" cellspacing="0" cellpadding="0" width="600">
とテーブルタグ自体に指定すればどのブラウザでも対応できますよ。
(これは僕の体験なんですけど、いくらW3Cの推奨だからって無理にスタイルシートを使わずに、htmlとスタイルシートをわけたほうがよかったです。そっちのほうが確実だもの。ここの部分の意思は今後かわることはないでしょう)

これで回答になってくれると嬉しいです。


2:[質問] Aki [2002/07/17 13:14 ]

EYE'sさん、ご返答ありがとうございます。

イントラネット限定で表示するため、対応ブラウザは限定していますが、とくにスタイルシートでの固定にこだわっているわけではないです。
同様のフォーマットをする画面が複数あるため、CSSで一括で行っています。(実際はCSSファイルに記述しています。)
わかりにくい表現で申し訳ないです。

> もし、スタイルシート非対応のブラウザがターゲットの中に入っているなら、
> <table border="1" cellspacing="0" cellpadding="0" width="600">
> とテーブルタグ自体に指定すればどのブラウザでも対応できますよ。

nowrapのセルが存在する為、Tableの幅は事前にわかりません。
TableタグにWidth指定すると、もしnowrapのセル幅が大きくてTable幅を越えた場合、そこで折り返して表示してしまいますよね?

例えば<Table Width="100">として、
<th nowrap>ああああああああああああああああああああああああ</th>
<th width="20">あいうえお</th>
とすると、2列目のthタグのwidthは無視され、TableタグのWidthを選択します。

これを回避する方法はないのでしょうか?


3:[回答] EYE's [MAIL] [2002/07/17 13:48 ]

やっと意味がつかめました。
えっと僕がよくやる手段としては、tableタグにあえてwidthを設定せずに、tr,th,tdタグにnowrapを設定します。tableタグは自分のwidthを自動計算するんですけど、tr,th,tdタグにnowrapが指定されているために自動改行されないといったものです。

使用例:
<table border="1" cellspacing="0" cellpadding="5">
<tr><td nowrap>hoge_hoge_hoge</td></tr>
<tr><td>hoge_hoge_hoge_hoge_hoge_hoge_hoge</td></tr>
</table>

えっと、上から2列目は自動改行されません。また、3列目は2列目より長い上、nowrapを指定していないので、2列目のwidthにあわせて自動改行されます。

これで大丈夫でしょうか?


4:[回答] EYE's [MAIL] [2002/07/17 14:03 ]

ごめんなさい。自分レスです。
今回の使用例で「hoge_hoge****」といったものをあげてしまったのですが、どうやらURIと間違ってtableが認識してしまい、実際には3列目の幅になってしまいました。
これも変な話しで、tableタグはURIを自動改行しないことがある。らしく、今回の使用例の場合、3列目にwidthがなってしまいます。あ、ちなみに日本語とかの2byte文字なら大丈夫みたいです。それとスペース(&nbsp;ではないです)が入っている場合もそこで自動改行されます。書いててだんだんと日本語がうまく書けなくなってきていますが、先ほどの使用例を訂正すると以下のようになります。

<table border="1" cellspacing="0" cellpadding="5">
<tr><td nowrap>hoge hoge hoge</td></tr>
<tr><td>hoge hoge hoge hoge hoge hoge hoge</td></tr>
</table>

実際の画面では、
__________________
| hoge hoge hoge |
------------------
| hoge hoge hoge |
| hoge hoge hoge |
| hoge           |
------------------
みたいになります。これ書き込みしたときに変になってなければいいですけど。

どうぞお試しください。


5:[質問] Aki [2002/07/17 16:21 ]

度々回答ありがとうございます。

> <table border="1" cellspacing="0" cellpadding="5">
> <tr><td nowrap>hoge hoge hoge</td></tr>
> <tr><td>hoge hoge hoge hoge hoge hoge hoge</td></tr>
> </table>

んー、列毎にnowrap指定かどうかが違うので、この方法は無理だと思います。
例えば
<table border="1">
<tr>
 <th nowrap>1</th>
 <th>2</th>
</tr>
<tr>
 <td nowrap>1列目です。自動改行しません。</td>
 <td width="50">2列目です。自動改行します。</td>
</tr>
</table>
このような感じで、1列目はnowrap指定ですが、2列目はwidth="50"で折り返して欲しいというものです。
同一列にnowrap指定とそうでないものが混在しているなら、EYE'sさんの例でいいのですが…。

もしかして、各列にnowrap指定した「隠し行」を持つということですか?
表示しない行を記述できるかどうかも、私にはわからないんですけど…。

度々わかりにくくて申し訳ありません。


6:[回答] さっぱり★ [2002/07/17 16:39 ]

th.fix div{width:10em}とか


7:[回答] Aki [2002/07/17 22:56 ]

ご返答ありがとうございます。

> th.fix div{width:10em}とか

<style type="text/css">
th.fix{
    color: inherit;
    background-color: #DDD;
    font-weight: bold;
    text-align:center;
    }
th.fix div{width:10em}
</style>
としてテストしましたが、やはりwindowがTableより小さくなると
width指定を無視します…。

…無理なんでしょうか?
諦めてServer側で<br>タグ入れ込むしかないか…。


8:[回答] さっぱり★ [2002/07/17 23:40 ]

ちゃんとdiv入れてテストしてます?


9:[完了] Aki [2002/07/18 13:40 ]

慌ててテストしたせいでソースに記述違いがありました。
以下のソースで希望通りの表示が出来ました。

ご教授ありがとうございました。

--- Source Begin ---
<html>
<head>
<title>test</title>
<style type="text/css">
th.fix{
    color: inherit;
    background-color: #DDD;
    font-weight: bold;
    text-align:center;
    }
th.fix div{width:4em}
th.variable{color: inherit;
    background-color: #DDD;
    font-weight: bold;
    text-align:center;
    white-space: nowrap;
    }
td.variable{
    color: inherit;
    background-color: #fff;
    font-weight: normal;
    text-align:center;
    white-space: nowrap;
    }
</style>
</head>
<body>
<table border="1">
  <tr>
    <th class="variable">あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん</th>
    <th class="fix"><div>テスト</div></th>
    <th class="fix"><div>あいうえお</div></th>
  </tr>
  <tr>
    <td class="variable">あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ</td>
    <td class="variable">あいうえお</td>
    <td class="variable">あ</td>
  </tr>
</table>
</body>
</html>
--- Source End   ---


10:[完了] ma-to [2002/07/18 21:46 ]

/* >>0の報告している挙動 (auto) の方が好きだ。*/
/* 例示とはいえいくらなんでも4emは狭い。*/

ところで。その方法は良くない。大概の装飾は文書に従属するから完全に切り離すことは出来ないが、せめて一般に言われる切り離しはした方が良いと考える。もしそれが簡単に出来るのならばなおさら。
因みに、n6の類でText Zoomしてみると分かるだろうが、n7の類やIEやOperaのそれとは異なり、em単位が再描画されない (良くないと言っている理由ではない)。

以下のように簡単に出来る。n6の類にやさしくしたつもりだが、それでも落ちるものがあるかもしれない。


    <style ..>
    ..
    .fix
    {
/*
*/
        width: 10em;
/*
*/
    }
    .fix:before
    {
        display: block;
/*
*/
        width: 10em;
/*
*/
        content: "\A";
    }
    ..
    <table ..>
    ..
    </table>
    <script ..>
    if(typeof window.Error=='function'){
        var
            div=document.createElement('div'),
            th=document.getElementsByTagName('th'),
            count=th.length,
            _th;
/*
*/
        div.style.W=10;    // width:10em;。
/*
*/
        with(div.style){
            margin=0;
            border='none';
            padding=0;
            width=W+'em';
            height='auto';
        }
        eval(
            "try{"+
                "while(count--)"+
                    "if((_th=th.item(count)).className=='fix')"+
                        "div=div.cloneNode(_th.applyElement(div,'inside'),false);"+
            "}"+
            "catch(typeError){"+
                "__n6__:{"+
                    "if(!navigator.productSub||20020529<navigator.productSub)"+
                        "break __n6__;"+
                    "var styleSheetList=document.styleSheets;"+
                    "with(styleSheetList.item(styleSheetList.length-1))"+
                        "insertRule('tr>th[class~=fix],th[class~=fix]:before{width:auto;}',cssRules.length);"+
                    "CSSStyleDeclaration.prototype.setDivStyle=function(){"+
                        "with(this){"+
                            "margin=0;"+
                            "border='none';"+
                            "padding=0;"+
                            "width='auto';"+
                            "letterSpacing='normal';"+
                            "textIndent=0;"+
                            "wordSpacing='normal';"+
                            "visibility='hidden';"+
                            "fontFamily='monospace';"+
                            "fontSizeAdjust='none';"+
                        "}"+
                    "};"+
                    "innerHeight;"+
                    "div.nbsp=document.createTextNode(String.fromCharCode(160));"+
                    "div.style.test=document.createElement('div');"+
                    "with(div.style.test.style){"+
                        "setDivStyle();"+
                        "position='absolute';"+
                        "top=left=0;"+
                        "right='auto';"+
                        "bottom='auto';"+
                        "height='auto';"+
                        "lineHeight=1;"+
                    "};"+
                    "with(div)"+
                        "style.test.appendChild(nbsp);"+
                    "document.body.appendChild(div.style.test);"+
                    "with(div.style){"+
                        "setDivStyle();"+
                        "position='static';"+
                        "height=0;"+
                        "overflow='hidden';"+
                        "fontSize=W*test.offsetHeight/test.offsetWidth+'em';"+
                    "};"+
                    "with(div)"+
                        "appendChild(nbsp);"+
                    "div=div.cloneNode(_th.appendChild(div),true);"+
                    "while(count--)"+
                        "if((_th=th.item(count)).className=='fix')"+
                            "div=div.cloneNode(_th.appendChild(div),true);"+
                    "with(document.body)"+
                        "removeChild(lastChild);"+
                "}"+
            "}"
        );
    }
    </script>


11:[完了] さっぱり★ [2002/07/19 07:51 ]

>その方法は良くない
むしろ適用されない可能性の高いスクリプト依存にした方が良くないかと。
>それでも落ちるものがあるかもしれない
そこまでのリスクを負ってするものですか?


12:[完了] ma-to [2002/07/19 14:21 ]


>>11
> むしろ適用されない可能性の高いスクリプト依存にした方が良くないかと。

依存していないんだが。。。
// 1996年に初めてhtmlを書いて以来、
// クライアントスクリプト依存のなにかを書こうとしたことはない、失敬しちゃうな。

あくまで>>0にとって固定幅は装飾であり大きな意味はないようだ。
よって、それを構造改革 (造語) で対応するのは邪道。
どうしてもIEの見栄えを優先的に相手にしたいのであればわざわざここで質問するまでもなく、即座に>>6の方法でやったと想像するが、いかに。


13:[完了] ma-to [2002/07/19 14:29 ]


>>11
> そこまでのリスクを負ってするものですか?

はっきり言うと落ちないだろう。そんなものは公開するつもりはない。
でも私はmozillaでマニアックに遊んでいないから、全てのビルドを持っていない。もしそんなのがあったらどこかの暇人が報告してくれるかもしれないな、という意味を持たせて付記しておいただけのこと。


14:[完了] さっぱり★ [2002/07/19 15:21 ]

>依存していないんだが
IE等は設定でスクリプトを無効にできることを知っていますか?
必要もなくscriptを入れるのは将来ISO-HTMLに移行するときにも不利です。

>失敬しちゃうな
#完了したのに投稿し、さらには「良くない」と言い放つことに関してのわびはなしでそういうこといいますか?

>即座に>>6の方法でやったと想像する
気づかなかったのでしょう。
IEやMozillaがOperaと異なり、意図通りに解釈してくれないのですから気づかなくて当然です。

#以降、不毛な議論にしかならないのでやめます。


15:[完了] ma-to [2002/07/19 16:32 ]


>>14
> さらには「良くない」と言い放つことに関してのわびはなし

なんだ、気に食わなかったんだ。でも悪いと思わないから口先だけでわびるような腐った真似はしないよ。
それとも>>6 の提案が最善かいな?
それともわびろといえば誰もがわびる現実世界に住むようなお偉いさんですか? 甘いなあ。

> IE等は設定でスクリプトを無効にできることを知っていますか?

装飾なしでいいんだろう、その人は。
因みに私はIEを使うときには画像もCSSもスクリプトも無効にさせる時がある。ものすごく速いぞ (笑)。

> 必要もなくscriptを入れるのは将来ISO-HTMLに移行するときにも不利です。

いったい誰が (大笑)。
百歩譲って移行するとしようか (クスクス)。
同じことが「必要もなく要素を装飾目的で直接追加する」ことが不利になると思うよ。


// しかし小汚いコードから読みとれというのも酷な話だな。


17章を読む。8、9、10章もついでに読むことになるだろう。どうやら外壁を固めるのがまっとうな方法のようだ。
    .fix { width : 10em; }
しかしこれはOperaくらいしか相手にしてくれないという現実に遭遇する。だったら更に梁を入れるというのはどうだろう。
    .fix { width : 10em; }
    .fix:before { display: block; width : 10em; content : "\A"; }
これで十分だろう。暑苦しいくらいだ。
でも大多数はMS-CSS (造語) 対応ブラウザだ。かといってこれのためにdivを物理要素みたいにつかうのはためらわれる。ヘッポコPerlを書いてISPに迷惑をかけるのもつらい。仕方ない、別の装飾言語を使おうか、となる。幸か不幸かIE使用者はクライアントスクリプトに関してデフォルト設定のままの場合が多数を占めているらしいからクライアントスクリプトで間に合わせても (数の上では) 無意味ではない。
クライアントスクリプトを使うのであればついでにn6の類のText Zoomの中途半端にも対応してみようか、という色気が出る。この機能を使うくらいならデフォルトのフォントサイズを変えるのだろうが、使わざるを得ない局面は存在する。もし各フォントの縦横比が各ソフトで統一されているのであればクライアントスクリプトではなくCSSで出来るんだが、そうではない。つまり、(n6の類のための下側の) 梁の長さを決めるための改行無し空白文字の適当なfont-sizeはクライアントスクリプトからしか取得できない。
一応振り返ってみる。もし人の視覚用ブラウザの数を気にするのであれば、>>6と>>10ではその差は少ない。
結果、>>10が出来上がる。

今は機械といえばアクセス数のほんの数%以下の巡回ソフトくらいだが、数の上でそうではなくなるという将来において、仮にそれが現実になったとしたら、>>6の類の手法はあり得ない。数を気にせず、1つでもあれば、という考え方を取れば、現在既に>>6のような手法は否定される。

今更だが、>>6に真っ向から反論しているつもりではない。>>6は考えの末に構造改革が最善だと提案したのだろうし、例えばそういう (どういう?) 雰囲気の場にいたとしたら敢えて反論するほどの熱もない。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World