「夫を成功」へ導く妻の秘訣 座談会

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>

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

このQ&Aに関連する最新のQ&A

A 回答 (5件)

まず、


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

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

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

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

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

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

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

失礼。


overflow:scroll; ← セミコロン 半角に
    • good
    • 0

失礼。


overflow:scroll; ← コロン 半角に
    • good
    • 0
この回答へのお礼

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

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

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

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



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

空のtdがいっぱいある理由はわからないですが、多分それで上手くいくはずです。
    • good
    • 0
この回答へのお礼

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

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

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

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


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

参考URL:http://allabout.co.jp/gm/gc/23865/2/
    • good
    • 0
この回答へのお礼

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

お礼日時:2011/03/28 12:31

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Qテーブルの行の高さを指定する時全てのtdタグに?

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた)<br>

<table border=1>
<tr><td class="test">1</td><td class="test">2</td></tr>
<tr><td class="test">3</td><td class="test">4</td></tr>
</table>

<br><br>

2の例<br>(一番左の列だけclass="test"をいれた)<br>

<table border=1>
<tr><td class="test">1</td><td>2</td></tr>
<tr><td class="test">3</td><td>4</td></tr>
</table>

<br><br>

3の例<br>(スタイルシートは何も指定していない)<br>

<table border=1>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた...続きを読む

Aベストアンサー

テーブルの行の高さ、なので <tr> タグに指定するのが素直でしょうか。

<style>
table tr { height:1em; } /* 全ての行に適用 */
table tr.test { height:3em; } /* 特定の行のみ適用 */
</style>

<table border>
<tbody>
<tr> <td> 1 <td> 2
<tr> <td> 3 <td> 4
<tr class=test> <td> 5 <td> 6
</table>

Q