WEB相談室

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

タイトル:テーブル内非表示にした場合のセルの収縮

0:[投稿] ちびしん [2003/04/08 18:06 ][環境:winxp,ie6,サーバーなし サーバーなし]

こんにちは、ちびしんと申します。
立て続けに何度もすみません。
今回は、テーブル内の文字や入力フィールドを非表示にした場合に
セルの巾(高さ?)を最小にしたいのですが、
<script type="text/javascript">
<!--
var A = 1;
if(A == 1){←外部から値が入ってきます
 document.form_name.inp_name.style.visibility = "hidden";
 document.all("b1").style.visibility = "hidden";
 document.all("T1").style.height = "0px";
}
//-->
</script>

<tr id="T1" style="height:50px">
<td><b id="b1" style="visibility:visible">文字</b></td>
<td><input id="inp" name="inp_name" type="text" style="visibility:visible"></td>
</tr>

上記の場合セルが縮まりませんでした。何かおかしいんでしょうか?
ご指導宜しくお願いいたします。<m(__)m>


1:[回答] chintara [2003/04/09 10:40 ]

visibilityではなくdisplayを使用してみてはいかがでしょうか。
参考:
http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/references/properties/display.htm#display


2:[関連] ちびしん [2003/04/09 13:06 ]

レス有難うございます。
displayで実現しました。有難うございました。
しかしstylesheetでclass属性にした時、
document.all("id").class="none";
をjavascriptで書いたところ識別子がないとエラーメッセージが
出るのですが、直接
style="display:none"と各変更したい場所へ各方法しかないのでしょうか?
宜しくお願いいたします。


3:[回答] chintara [2003/04/09 13:47 ]

classNameにしてみては。
http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/references/properties/className.htm


4:[関連] ma-to [2003/04/09 17:05 ]


class属性の値は空白で区切られることで、CSSから (というか、この属性はCSS専用だという実情なので断るのも変だが) 複数のクラスセレクタに分割される、ということを考慮して、、、ここでは関係ないみたいですね。


HTMLにおけるCSS 2

[ CSS 2  17.2 [
TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }
User agents may ignore these 'display' property values for HTML documents, since authors should not alter an element's expected behavior. ]]

[ CSS 2.1  17.2 [
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
User agents may ignore these 'display' property values for HTML table elements, since HTML tables may be rendered using other algorithms intended for backwards compatible rendering. However, this is not meant to discourage the use
of 'display: table' on other, non-table elements in HTML. ]]

しかし、これでもまだ、
「此処に挙げられたdisplayの値だけ」
という誤解を生じかねない。この訂正の意味は
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#s-17-2
に書かれている。
The intention was that a UA may refuse to render an HTML table as anything else than a table. The sentences was not meant to discourage the use of 'display: table' on other, non-table elements in HTML.

従って、HTMLでは、
「table-row --> none が、万が一、無視されたとしても、UAのせいではない。」
「none --> table-row が無視されたら、UAのせいに出来る。」
が成り立つ、と解釈するのが妥当。

そもそも、trでは、
    visibility : collapse ;
です。相手にする環境が、MS-CSS(造語)だから、どうでもいいけどね。


5:[完了] ちびしん [2003/05/14 15:46 ]

&保留
一ヶ月も経ってしまいました。申し訳ないです。
ご回答いただきました皆さん有難うございました。
どうも実現しないPCがあり、また仕事上次へ進むために断念し、
完了&保留とさせていただきました。
今後再度質問させていただきたいと思います。
有難うございました。<m(__)m>

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World