IE6,7,8で、tableの幅に合わせて全体の幅が広がるhtml画面の実現方法を教えてください。

Question

caji

4

4もっと見る

80pt

ウェブ制作

IE6,7,8で、tableの幅に合わせて全体の幅が広がるhtml画面の実現方法を教えてください。

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

回答の条件

1人3回まで

登録：2010/11/23 15:44:04
終了：2010/11/30 15:45:02

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

tasklight · Answer 1 · 2010-11-23T18:56:26+09:00

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

<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>

Masa03 · Answer 2 · 2010-11-24T05:23:05+09:00

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

<!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>

Masa03 · Answer 3 · 2010-11-26T21:57:26+09:00

いただいたソースで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などのタグで２カラムレイアウト（ナビエリアが固定幅190ox、コンテンツ幅が可変）したモノの適用例があれば望ましいです。

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

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

IE6,7,8で、tableの幅に合わせて全体の幅が広がるhtml画面の実現方法を教えてください。

回答（3件）

tasklight323402010/11/23 18:56:26

Masa03302010/11/24 05:23:05

Masa03302010/11/26 21:57:26

コメント（0件)

この質問への反応（ブックマークコメント）