tableのheight指定が効かない

解決済

質問者：hainaina
質問日時：2011/03/28 02:22
回答数：5件

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>

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： naokita
回答日時：2011/03/28 11:39

まず、

overflow:scroll； ←　コロン小文字に
----------------

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

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

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

- 1
- 件

通報する

この回答へのお礼

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

回答ありがとうございました！

通報する

お礼日時：2011/03/28 12:44

No.5

回答者： naokita
回答日時：2011/03/28 11:42

失礼。

overflow:scroll； ←　セミコロン　半角に

- 0
- 件

通報する

No.4

回答者： naokita
回答日時：2011/03/28 11:40

失礼。

overflow:scroll； ←　コロン　半角に

- 0
- 件

通報する

この回答へのお礼

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

指摘ありがとうございます。

通報する

お礼日時：2011/03/28 12:44

No.2

回答者： karita_83
回答日時：2011/03/28 10:36

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

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

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

- 0
- 件

通報する

この回答へのお礼

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

回答、ありがとうございました！

通報する

お礼日時：2011/03/28 12:42

No.1

回答者： abacabu
回答日時：2011/03/28 07:00

過去に趣味でホームページを作っていた者です。

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

参考URL：http://allabout.co.jp/gm/gc/23865/2/