WEB相談室

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

タイトル:「border-collapse:collapse」と「overflow:hidden」を併用した場合の動作について

0:[投稿] アニマルG [2006/10/11 19:34 ] [環境:Windows2000 SP4 Firefox1.5.0.7 IE6.0SP1 Windows2003 Server Eclipse3.1 JDK 1.4.2 ]

アニマルGです。
また、質問させて下さい。

タイトルに記したように「border-collapse:collapse」と
「overflow:hidden」を併用した場合Table内の各セルの左表示が
2,3px程欠落して表示されます。
IEでは問題無く表示されますが、Firefoxで表示すると左端2,3px程
欠落して表示されていまいます。

何方かFirefoxでも表示出来る方法をご存知の方、お教え下さい
ますよう、お願い致します。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>TEST</title>
<style type="text/css">
<!--
body {
background-color:#F5F5F5;
font-size:9pt;
font-family:'MS Pゴシック','MS ゴシック';
margin:0px;
}

th, td {
font-size:9pt;
padding:0px;
}

form {
margin:15px 0px 10px 10px;
}

table {
border-collapse:collapse;
}

.table_form {
background-color:#FFFFFF;
border-color:#777777;
border-style:solid;
border-width:1px 0px 0px 1px;
white-space:nowrap;
}
.item_hd_cnt {
background-color:#7ecef1;
border-color:#777777;
border-style:solid;
border-width:1px;
color:#333399;
padding:3px 3px 1px 3px;
text-align:center;
white-space:nowrap;        
overflow:hidden;
}
.item_odd_lft {
background-color:#eeffff;
border-color:#777777;
border-style:solid;
border-width:1px;
line-height:150%;
padding:0px 3px 0px 3px;
text-align:left;
white-space:nowrap;
overflow:hidden;
}
-->
</style>
</head>

<body>    
    <table class="table_form" cellpadding="0" cellspacing="0" hspace="0" vspace="0" border="0"
        style="table-layout:fixed; width:300px; margin-right:10px;">
        <tr>
            <th style="width:100px;" class="item_hd_cnt">管理番号</th>
            <th style="width:100px;" class="item_hd_cnt">商品名</th>
            <th style="width:100px;" class="item_hd_cnt">タイトル名</th>
        </tr>
        <tr>
            <td class="item_odd_lft" style="width:100px;" nowrap><NOBR>VI10000_000010001</NOBR></td>
            <td class="item_odd_lft" style="width:100px;" nowrap><NOBR>ああああああああああああああああああ</NOBR></td>
            <td class="item_odd_lft" style="width:100px;" nowrap><NOBR>いいいいいいいいいいいいいいいいいい</NOBR></td>
        </tr>
    </table>
</body>
</html>

以上、宜しくお願い致します。


1:[回答] 燕雀 [2006/10/14 16:51 ]

仕方ないですから,結合モデルの使用はあきらめて,分離モデルを使って,結合モデル風に見せるようにしたらいかがですか?

table {
border-collapse:separate; /* koko */
}
.item_hd_cnt {
background-color:#7ecef1;
border-color:#777777;
border-style:solid;
border-width:0px 1px 1px 0px; /* koko */
color:#333399;
padding:3px 3px 1px 3px;
text-align:center;
white-space:nowrap;        
overflow:hidden;
}
.item_odd_lft {
background-color:#eeffff;
border-color:#777777;
border-style:solid;
border-width:0px 1px 1px 0px; /* koko */
line-height:150%;
padding:0px 3px 0px 3px;
text-align:left;
white-space:nowrap;
overflow:hidden;
}


2:[質問] アニマルG [2006/10/16 12:03 ]

燕雀さん、レスありがとうございます。

この方法ですと思ったように表示されましすが、TD要素内に何も
表示する物が無い場合に右と下のBorderが消えてしまいます。
何か良い方法は、ありませんでしょうか?

又、今回のような場合、IEの場合とFFの場合と別々に用意し、
スタイルをUseragentか何かをJavaScript判定して切換えて使用
するのが普通の使い方なのでしょうか?

以上、宜しくお願い致します。


3:[回答] 燕雀 [2006/10/16 22:58 ]

> TD要素内に何も表示する物が無い場合に右と下のBorderが消えてしまいます。
---------------
これには定石があります.
item_odd_lft {
background-color:#eeffff;
border-color:#777777;
border-style:solid;
border-width:0px 1px 1px 0px;
empty-cells:show;          /* koko */
line-height:150%;
padding:0px 3px 0px 3px;
text-align:left;
white-space:nowrap;
overflow:hidden;
}
とするのと,<td></td>とするのではなく,空のものについては<td>&nbsp;</td>と,空白を入れます.

> IEの場合とFFの場合と別々に用意し、スタイルをUseragentか何かをJavaScript判定して切換えて使用…
---------------
"CSSハック"とか,"振り分け"とか言われているもののことですね?
そりゃ,しないにこしたことはないでしょう.どうしてもしょうがない,という時ぐらいじゃないでしょうかね.使うのは.

ところで,すべての<th>や<td>に同じclassを指定されていますが,このような場合,以下のようなCSSセレクタの指定方もあります.
---------------
table.table_form th {
background-color:#7ecef1;
border-color:#777777;
border-style:solid;
border-width:0px 1px 1px 0px;
color:#333399;
padding:3px 3px 1px 3px;
text-align:center;
white-space:nowrap;        
overflow:hidden;
}
table.table_form td {
background-color:#eeffff;
border-color:#777777;
border-style:solid;
border-width:0px 1px 1px 0px;
empty-cells:show;
line-height:150%;
padding:0px 3px 0px 3px;
text-align:left;
white-space:nowrap;
overflow:hidden;
}
とすると,
---------------
   <table class="table_form" cellpadding="0" cellspacing="0" hspace="0" vspace="0" border="0"
       style="table-layout:fixed; width:300px; margin-right:10px;">
       <tr>
           <th style="width:100px;">管理番号</th>
           <th style="width:100px;">商品名</th>
           <th style="width:100px;">タイトル名</th>
       </tr>
       <tr>
           <td style="width:100px;" nowrap><NOBR>VI10000_000010001</NOBR></td>
           <td style="width:100px;" nowrap><NOBR>&nbsp;</NOBR></td>
           <td style="width:100px;" nowrap><NOBR>いいいいいいいいいいいいいいいいいい</NOBR></td>
       </tr>
        …
というふうに,<th>や<td>にclassを指定しなくても良くなります.


4:[質問] アニマルG [2006/10/17 13:03 ]

燕雀さん、お早いレスに感謝致します。

empty-cells:showについてですが、このプロパティーは、IEでは
効かないプロパティーのようですね。
両方で上手く表示する方法は、他ににはないものでしょうか?

>すべての<th>や<td>に同じclassを指定されていますが,
>このような場合,以下のようなCSSセレクタの指定方もあります.
このような方法があったとは、知りませんでした。
とてもすばらしいです。
とても参考になりますので今後使用を検討させて頂きます。

以上、宜しくお願い致します。


5:[回答] 燕雀 [2006/10/17 23:00 ]

空セルのボーダーを表示するために,&nbsp;をセルの中に書いてください(<td>&nbsp;</td>).IEでも効くはずです.

> とてもすばらしいです。
---------------
それほどのものでもないと思いますが….CSSセレクタにはもっといろいろ種類があるのですが,IE6ではそのほとんどが無視されるのが難点です.


6:[質問] アニマルG [2006/10/18 12:55 ]

燕雀さん、ありがとうございます。

>空セルのボーダーを表示するために,&nbsp;をセルの中に書いて
>ください(<td>&nbsp;</td>).IEでも効くはずです.
分かりました。

>それほどのものでもないと思いますが….CSSセレクタには
>もっといろいろ種類があるのですが,IE6ではそのほとんどが
>無視されるのが難点です.
同じ?ブラウザーなのに何でここまで違う振る舞いをするんで
しょうね。困ったものです。


便乗質問と言っては何なんですが、onload機能をFirefoxで実現する
方法なんてご存知でしょうか?
セキュリティー上の問題でFirefoxは、onload機能が使えないような
のですが ...

宜しくお願い致します。


7:[完了] アニマルG [2006/10/18 19:42 ]

燕雀さん、申し訳ありません。

>便乗質問と言っては何なんですが、onload機能をFirefoxで実現する
>方法なんてご存知でしょうか?
>セキュリティー上の問題でFirefoxは、onload機能が使えないような
>のですが ...
私の勘違いでした、完了です。

燕雀さん、拙い説明、文章にもかかわらず付合い頂き、
誠に有難うございました。
又、書込みさせて頂きますので、その時には宜しくお願い致します。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]