人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

IE6,7,8で、tableの幅に合わせて全体の幅が広がるhtml画面の実現方法を教えてください。
2カラムでヘッダー、フッターがあるデザインで、コンテンツエリアに配置されているTableタグの幅にしたがってコンテンツエリアおよびサイト全体の幅が広がる仕様のhtmlの実現方法を教えていただきたいです。サイト全体の幅の最小値は1020pxとし、それ以上は狭まらないようにしたいです。

●質問者: caji
●カテゴリ:ウェブ制作
✍キーワード:HTML IE6 まら エリア カラム
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● tasklight
●23ポイント

こんな感じでいかがですか。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script tyle="text/javascript">
function hoget() {
 var w = screen.availWidth - 80;
 if (w <= 1020) w = 1020;
 $("#hoge").attr("width", w);
}
</script>
</head>
<body onload="hoget()">
<table id="hoge" border="1">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
</table>
</body>
</html>
◎質問者からの返答

ありがとうございます。IEでbodyの幅が変化することを確認できました。

可能でしたらjqueryなどのライブラリを使用せず、実現したいです。


2 ● Masa03
●35ポイント

ウインドウリサイズにも対応してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8" />
 <title>min-width</title>
 <style>
 html, body { margin: 0; padding: 0; }
 body { min-width: 1020px; }
 #BODY { width: 100%; }
 td { border: solid 1px #ccc; }
 </style>
 <script type="text/javascript">
 (function () {

 function loadListener (event) {
 var doc, width, style;

 doc = event.target || document;
 width = doc.width || doc.documentElement.offsetWidth;
 style = doc.body.style;

 if ('minWidth' in style) {
 return;
 }

 if (width < 1020) {
 style.width = '1020px';
 }

 if (typeof addEventListener === 'function' || typeof addEventListener === 'object') {
 addEventListener('resize', resizeListener, false);
 } else if (typeof attachEvent === 'function' || typeof attachEvent === 'object') {
 attachEvent('onresize', resizeListener);
 }
 }

 function resizeListener (event) {
 var win, doc, width, style;

 win = event.target || window;
 doc = win.document;
 width = doc.width || doc.documentElement.scrollWidth;
 style = doc.body.style;

 if (width === 1020 || width > 1020 && style.width === '100%' || width < 1020 && style.width === '1020px') {
 return;
 }

 style.width = width < 1020 ? '1020px' : '100%';
 }

 if (document.addEventListener) {
 document.addEventListener('DOMContentLoaded', loadListener, false);
 } else if (typeof attachEvent === 'function' || typeof attachEvent === 'object') {
 attachEvent('onload', loadListener);
 }
 })();
 </script>
</head>
<body>
 <table id="BODY">
 <tbody>
 <tr><td>left</td><td>right</td></tr>
 </tbody>
 </table>
</body>
</html>
◎質問者からの返答

ありがとうございます。

いただいたソースでtableのtdを100個に追加して確認したところ、Tableがbodyから突き抜けて表示されてしまいました・・。tableに合わせてbodyの幅も広がってほしいです。また、divなどのタグで2カラムレイアウト(ナビエリアが固定幅190ox、コンテンツ幅が可変)したモノの適用例があれば望ましいです。


3 ● Masa03
●22ポイント

いただいたソースでtableのtdを100個に追加して確認したところ、Tableがbodyから突き抜けて表示されてしまいました・・。

なるほど。確かにそうですが、当初質問された状況とは異なりますね。

どんな状況を想定しているのか、よくわかりませんでした。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8" />
 <title>min-width</title>
 <style>
 html, body, #BODY { margin: 0; padding: 0; }
 body { min-width: 1020px; border: solid 2px red; }
 #BODY { width: 100%; }
 td { border: solid 1px #ccc; }
 </style>
 <script type="text/javascript">
 (function () {

 function loadListener (event) {
 var doc, body, width, style;

 doc = event.target || document;
 body = doc.body;
 width = doc.width || doc.documentElement.offsetWidth;
 style = body.style;

 if (width < 1020) {
 style.width = '1020px';

 if (!('minWidth' in style)) {
 if (typeof addEventListener === 'function' || typeof addEventListener === 'object') {
 addEventListener('resize', resizeListener, false);
 } else if (typeof attachEvent === 'function' || typeof attachEvent === 'object') {
 attachEvent('onresize', resizeListener);
 }
 }
 } else if (body.scrollWidth > body.offsetWidth) {
 body.style.width = body.scrollWidth + 'px';
 }
 }

 function resizeListener (event) {
 var win, doc, width, style;

 win = event.target || window;
 doc = win.document;
 width = doc.width || doc.documentElement.scrollWidth;
 style = doc.body.style;

 if (width === 1020 || width > 1020 && style.width === '100%' || width < 1020 && style.width === '1020px') {
 return;
 }

 style.width = width < 1020 ? '1020px' : '100%';
 }

 if (document.addEventListener) {
 document.addEventListener('DOMContentLoaded', loadListener, false);
 } else if (typeof attachEvent === 'function' || typeof attachEvent === 'object') {
 attachEvent('onload', loadListener);
 }
 })();
 </script>
</head>
<body>
 <table id="BODY">
 <tbody>
 <tr><td>left</td><td>right</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td><td>inserted</td></tr>
 </tbody>
 </table>
</body>
</html>

また、divなどのタグで2カラムレイアウト(ナビエリアが固定幅190ox、コンテンツ幅が可変)したモノの適用例があれば望ましいです。

table要素ではない方法がお望みなら始めに書いて欲しかったのですが。(今まで書いたコードが無駄になります)

今から修正するのは面倒なので、このコードをベースにご自身で修正してみてください。

◎質問者からの返答

説明が分かりにくかったようでですので必要事項を纏めました。

?Web画面のレイアウトは通常のDivなどのタグで作成された2カラムのものを想定(ちょうどこのページと同じようなモノです)

?そこのコンテンツエリア(このページで言うと今記事を投稿しているメインの記事エリア)にTableを配置する

?Tableの幅は色々なパターンが考えられ、もし列数が多く幅が広いTableが配置された場合はそれに合わせてページ全体を広げて表示したい

?Tableの幅が小さい場合は、それに合わせてページ全体が狭まるのではなく、全体で1020pxのページレイアウトを確保し、それ以下には狭まらないようにしたい

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ