- PR -

HTMLのテーブルでＩＥ画面幅よりサイズが大きい場合の編集について

1
投稿者投稿内容
マイク
会議室デビュー日: 2004/03/15
投稿数: 6
投稿日時: 2004-03-15 21:38
HTMLのTABLEタグを使用したテーブル表示時に
<TABLE>
<TR>
<TD width=100>１組</TD>
<TD width=100>２組</TD>
　　　　　　　・
　　　　　　　・
<TD width=100>１００組</TD>
</TR>
</TABLE>
とＩＥの横の画面幅よりもTDの編集情報の方がサイズが大きくなった場合、
通常はＩＥの横の画面幅に合わせてwidth=100のセルが縮小されて表示され、
実際にはwidth=100ではなくなりますが、
ＩＥの横の画面幅よりも大きくなった場合は、スクロールバーを使用して、
セル幅がwidth=100の幅を保ったまま、テーブル表示することはできるのでしょうか？
（セル幅は100固定でそのセル幅よりも長い文言をセル内に表示させる場合は２行に折り返して表示させたいため、TDにnowrapは使用していません。）



[ メッセージ編集済み 編集者: マイク 編集日時 2004-03-15 21:39 ]
まゆりん
ぬし
会議室デビュー日: 2002/08/12
投稿数: 539
お住まい・勤務地: よこはま
投稿日時: 2004-03-16 10:02
こんにちは、まゆりんです。

<TABLE width="300">
とすればブラウザのサイズに影響されずに指定した幅で表示されます。

ちなみに、
>（セル幅は100固定でそのセル幅よりも長い文言をセル内に表示させる場合は
>２行に折り返して表示させたいため、TDにnowrapは使用していません。）

半角文字だと自動改行してくれませんのでご注意を。
<TD width=100>ああああああああああああああああああああ</TD> →自動改行される
<TD width=100>123456789012345678901234567890</TD> →自動改行されない


※読みづらい個所を修正
_________________

まゆりん＠絶賛勉強中＜基本情報処理

[ メッセージ編集済み 編集者: まゆりん 編集日時 2004-03-16 10:04 ]
マイク
会議室デビュー日: 2004/03/15
投稿数: 6
投稿日時: 2004-03-16 10:18
返答ありがとうございます。

><TABLE width="300">
>とすればブラウザのサイズに影響されずに指定した幅で表示されます。

上記のように設定すると、TDで設定したwidthの合計が300以下の場合は、
１つのTDのwidthが100以上に拡大されて表示されてしまい、
また、TDのWidthの合計が300以上の場合は、
１つのTDのwidthが100以下に縮小されるので、
TABLEのWIDTHでは対応できないと考えていたのですが。

TDで表示される列のセルが数十個の場合でも、２、３個の場合でも
TDのwidthが常に100で保たれて表示される方法はないのでしょうか？
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2004-03-16 10:30
　私は、サーバサイドで列の幅からテーブル全体の幅を計算し、変更しています。

　あと、すべての列の幅を指定すると、指定した幅の比を保ったまま拡大縮小するようです。なので、style="width:auto"な何も表示しない列を追加し、それに吸収させるということもしています。

[ メッセージ編集済み 編集者: Jitta 編集日時 2004-03-16 10:43 ]
永井和彦
ぬし
会議室デビュー日: 2002/07/03
投稿数: 276
お住まい・勤務地: 東京都
投稿日時: 2004-03-16 10:48
引用:

Jittaさんの書き込み (2004-03-16 10:30) より:
　私は、サーバサイドで列の幅からテーブル全体の幅を計算し、変更しています。

　あと、すべての列の幅を指定すると、指定した幅の比を保ったまま拡大縮小するようです。なので、style="width:auto"な何も表示しない列を追加し、それに吸収させるということもしています。


このJittaさんの手法+以下のような指定でマイクさんの要求を達成出来るかと思います。

コード:

<DIV STYLE="width:画面表示幅(300pxとか、100%とか);height:画面表示高;overflow:scroll;">



テーブル



</DIV>


＜追記＞
すみません、不要な機能を付け足してしまったかも知れません。
上記はテーブル自体の大きさに関わらず、画面上に一定の大きさで配置して
＊テーブルだけをスクロールさせる＊スクロールバーを表示する
……というサンプルになります。
もちろん、UAの対応状況は必要に応じて確認が必要になります。
＃って、スタイルの対応状況確認は常に必要ですが……
＜/追記＞

[ メッセージ編集済み 編集者: 永井和彦 編集日時 2004-03-16 10:53 ]
ya
大ベテラン
会議室デビュー日: 2002/05/03
投稿数: 212
投稿日時: 2004-03-17 20:05
もっと単純に、

コード:
<table style="table-layout:fixed;">
<tr>
<td style="width:100px;">a</td>
<td style="width:200px;">bc</td>
<td style="width:300px;">def</td>
<td style="width:400px;">ghij</td>
<td style="width:500px;">klmno</td>
<td style="width:600px;">pqrstu</td>
<td style="width:700px;">vwxyzab</td>
</tr>
</table>


こんな感じでどうでしょうか。
マイク
会議室デビュー日: 2004/03/15
投稿数: 6
投稿日時: 2004-03-17 20:58
返信ありがとうございます。
いろいろ試行錯誤していましたが、
上記の方法なら影響も小さく簡単に取り込めそうです。
ありがとうございます。
1

スキルアップ／キャリアアップ（JOB@IT）