• ベストアンサー
  • 困ってます

tableのheight指定が効かない

  • 質問No.6626006
  • 閲覧数12598
  • ありがとう数6
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 65% (13/20)

tableの高さを固定したく、heightとoverflowを指定したんですが、
tableに記述したソース分の大きさ(高さ)になり、スクロールバーが表示されません。

/*----外部CSS----*/
.sample{
color: #ffffff;
background-color: #000000;
height: 500px;
width : 90%;
overflow:scroll;
}
/*----ソース-----*/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" hrefstyle.css"></head>
<body>

<table class="sample"><tbody><tr>
<td class="a1"></td><td class="a0"></td><td class="a2"></td></tr><tr>
<td class="a0"></td><td class="a0">

<div class="text">本文(heightが700pxくらいの内容)</div>

</td><td class="a0"></td></tr><tr>
<td class="a3"></td><td class="a0"></td><td class="a4"></td>
</tr></tbody></table>
                  ※tdのclassはテーブルのふちに用いてる画像を指定してあります。
</body>
</html>

解決方法をご存知の方、よろしくお願いします。

質問者が選んだベストアンサー

  • 回答No.3
  • ベストアンサー

ベストアンサー率 57% (1008/1745)

まず、
overflow:scroll; ← コロン小文字に
----------------

テーブル関連にoverflowバグもあるので、
テーブル自体にスクロールを付けるのではなく、
その外枠を作って中のコンテンツをスクロールさせる。
外枠より中のテーブルが大きければ全体を見る為にスクロールさせる考え方。(コンテンツは、テーブルでも良いですが・・・)

<div style="height:500px; width:90%; overflow:auto;">
コンテンツ
</div>

----------------
>※tdのclassはテーブルのふちに用いてる画像を指定してあります。
これも間違った方法で、何の為のテーブルなのでしょう・・・
テーブルは表です。画像を入れる為の表だと無意味なテーブル・・・
表以外の目的でテーブルは利用しない方が良いでしょう。
お礼コメント
hainaina

お礼率 65% (13/20)

上手くいきました!
画像の件も含め、たくさん勉強になりました。

回答ありがとうございました!
投稿日時:2011/03/28 12:44

その他の回答 (全4件)

  • 回答No.5

ベストアンサー率 57% (1008/1745)

失礼。
overflow:scroll; ← セミコロン 半角に
  • 回答No.4

ベストアンサー率 57% (1008/1745)

失礼。
overflow:scroll; ← コロン 半角に
お礼コメント
hainaina

お礼率 65% (13/20)

すみません。
入力ミスです。

指摘ありがとうございます。
投稿日時:2011/03/28 12:44
  • 回答No.2

ベストアンサー率 45% (39/86)

tableについたクラスに高さを指定して、oveflowの指定をしているからでは。

<div class="text">
を中に入れているtdに高さを指定して
overflow:scroll;
の指定をすれば上手くいくと思いますよ。

空のtdがいっぱいある理由はわからないですが、多分それで上手くいくはずです。
お礼コメント
hainaina

お礼率 65% (13/20)

やってみましたが、反映されませんでした。
別の方法を探してみます。

回答、ありがとうございました!
投稿日時:2011/03/28 12:42
  • 回答No.1

ベストアンサー率 37% (250/663)

過去に趣味でホームページを作っていた者です。
まずはじめに、表示範囲を指定して、
中身に大量の情報を指定しても、勝手にはスクロールバーは付きません。
スクロールルバーを個別に指定する必要があります。
丁度良い参考ページがあったので貼っておきます。
っていうか…
これらの知識はネット上に沢山転がっています。
過去に散々ホームページ作成が流行った時期があるので、
かなり素人向けの解説付き親切サイトが多いです。
スクロールバー タグやホームページ スクロールバー等
で検索すると簡単に欲しい情報が手に入ります。
それでは頑張って下さい。
お礼コメント
hainaina

お礼率 65% (13/20)

勉強になりました。
丁寧に説明までしていただきありがとうござます!
投稿日時:2011/03/28 12:31
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ