テーブルエレメント
  列を固定幅に設定

table-layout:fixed で幅を固定にし、それぞれのセルの幅を指定するとその幅で必ず表示されます
( ※ word-wrap は IE のみ有効です )

↓実装
A B
漢字漢字漢字漢字漢字漢字漢字 \\\\\\\\\\\\\\\\\\\\\\\\\\\\
A B


↓画像
IE の場合 IE 以外

  
<TABLE
	style='
		background-color:black;
		table-layout:fixed;
		width:200px;
	'
	cellspacing=1
>
<TH style='background-color:silver;width:100px'>A</TH>
<TH style='background-color:silver;width:100px'>B</TH>

<TR>
<TD style='
	background-color:white;
	word-wrap:break-word;
	vertical-align:top;
	'
>漢字漢字漢字漢字漢字漢字漢字</TD>
<TD style='
	background-color:white;
	word-wrap:break-word;
	vertical-align:top;
	'
>\\\\\\\\\\\\\\\\\\\\\\\\\\\\</TD>
</TR>
<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD>
</TR>

</TABLE>
  
nowrap を TD に設定すると以下のようになります
( IE 以外では、overflow:hidden を指定する必要があります )

↓実装
A B
漢字漢字漢字漢字漢字漢字漢字 \\\\\\\\\\\\\\\\\\\\\\\\\\\\
A B


しかし、これでは情報が欠落するので( IE では前述の word-wrap で解決している )
nowrap を 指定しないで、DIV 要素追加して 見えない部分をスクロールさせます
※ IE では、逆にスクロールは無視されますので、word-wrap をセットしておきます

↓実装
A B
漢字漢字漢字漢字漢字漢字漢字
\\\\\\\\\\\\\\\\\\\\\\\\\\\\
A B


↓画像
IE の場合 IE 以外

  
<TABLE
	style='
		background-color:black;
		table-layout:fixed;
		width:200px;
	'
	cellspacing=1
>
<TH style='background-color:silver;width:100px'>A</TH>
<TH style='background-color:silver;width:100px'>B</TH>

<TR>
<TD style='
	background-color:white;
	word-wrap:break-word;
	overflow:hidden;
	'
><div style='overflow:auto'>漢字漢字漢字漢字漢字漢字漢字</div></TD>
<TD style='
	background-color:white;
	word-wrap:break-word;
	overflow:hidden;
	'
><div style='overflow:auto'>\\\\\\\\\\\\\\\\\\\\\\\\\\\\</div></TD>
</TR>
<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD>
</TR>

</TABLE>
  

↓実装
A B
漢字漢字漢字漢字漢字漢字漢字
\\\\\\\\\\\\\\\\\\\\\\\\\\\\
A B











   home    create:2005/11/19  update:2011/11/19   InfoBoard Version 1.00 (Perl).



HOME : SQLの窓
インデックストップ
技術情報セクション Ⅰ
技術情報セクション Ⅱ
技術情報セクション Ⅲ : ソース掲示板

外部セクション Ⅰ : logical error
手書きブログ専用・カスタムパレットツール