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

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

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2010/11/23 15:44:04
  • 終了:2010/11/30 15:45:02

回答(3件)

id:tasklight No.1

tasklight回答回数323ベストアンサー獲得回数402010/11/23 18:56:26

ポイント23pt

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

<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>
id:caji

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

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

2010/11/23 19:28:41
id:Masa03 No.2

Masa03回答回数3ベストアンサー獲得回数02010/11/24 05:23:05

ポイント35pt

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

<!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>
id:caji

ありがとうございます。

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

2010/11/26 03:41:41
id:Masa03 No.3

Masa03回答回数3ベストアンサー獲得回数02010/11/26 21:57:26

ポイント22pt

いただいたソースで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要素ではない方法がお望みなら始めに書いて欲しかったのですが。(今まで書いたコードが無駄になります)

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

id:caji

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

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

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

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

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

2010/11/28 12:11:17

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません