こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

tableのheight指定が効かない

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>

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

投稿日時 - 2011-03-28 02:22:15

QNo.6626006

困ってます

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

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

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

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

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

投稿日時 - 2011-03-28 11:39:04

お礼

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

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

投稿日時 - 2011-03-28 12:44:08

ANo.3

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

失礼。
overflow:scroll; ← セミコロン 半角に

投稿日時 - 2011-03-28 11:42:55

ANo.4

失礼。
overflow:scroll; ← コロン 半角に

投稿日時 - 2011-03-28 11:40:50

お礼

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

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

投稿日時 - 2011-03-28 12:44:46

ANo.2

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

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

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

投稿日時 - 2011-03-28 10:36:05

お礼

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

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

投稿日時 - 2011-03-28 12:42:57

ANo.1

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

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

投稿日時 - 2011-03-28 07:00:57

お礼

勉強になりました。
丁寧に説明までしていただきありがとうござます!

投稿日時 - 2011-03-28 12:31:34

あなたにオススメの質問