テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。

解決済

質問者：rakuda2525
質問日時：2008/03/16 05:33
回答数：2件

#test1はちゃんとスクロールバーが付くのに、
テーブル内の設定したセルにはスクロールバーが付きません。
tableタグやth,tdタブにも設定したりと色々しましたが、
付きません。
なぜなのでしょうか。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test page</title>
<style type="text/css">

table {
background:yellow;

}

th,td {
width:200px;
border:solid 1px #000000;
overflow:scroll;
}

#test1 {
width:100px;
overflow:scroll;
}

</style>
</head>
<body>

テーブル
<br />

<table>
<tr>
<th>見出し１</th><td>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</td>
</tr>
<tr>
<th>見出し２</th><td></td>
</tr>
<tr>
<th>見出し３</th><td>本文</td>
</tr>
</table>

<div id="test1">あああああああああああああああああああああああああああああああああ</div>

</body>
</html>

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： abril
回答日時：2008/03/16 12:16

> なぜなのでしょうか。

overflowプロパティの適用対象はblock要素”display : block”ですが、<td>／<th>はそれぞれtable要素のグループであり”display : table-cell”ですので適用外となります。
なので、ANo.1の回答者様の仰る通り、セルの中に更にblock要素のタグを入れた上で、それに対するスタイル設定でoverflowプロパティを使用して下さい。
（overflowプロパティ参考）http://w3g.jp/css/display_position/overflow

- 2
- 件

通報する

この回答へのお礼

ありがとうございました！解決しました！

通報する

お礼日時：2008/03/16 13:43

No.1

回答者： auty
回答日時：2008/03/16 06:47

セルの中に、<div>タグを入れてみたらどうでしょうか。

-----------------------------------------------

#test1 {
width: 100px;
overflow: scroll;
}
.sc {
width: 100px;
overflow: scroll;
}
</style>
-----------------------------------------------

<td>
<div class="sc">
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
</div>
</td>
-----------------------------------------------

- 0
- 件

通報する

この回答へのお礼

ありがとうございました！解決しました！

通報する

お礼日時：2008/03/16 13:42

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

質問する（無料）

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

今、見られている記事はコレ!

隣の枝がはみ出してきたら切ってもいい？最もやってはいけないことは？

「隣の木が越境してきて困るが、勝手に切ってはいけないと聞くし…」そう思っている方も多いだろう。実は、2023年4月1日に民法が改正され、この「越境枝」のルールが大きく変わった。教えて！gooでも「境界から出て...
弁護士が解説！あなたの声を行政に届ける「パブリックコメント」制度のすべて

社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
カスハラとクレームの違いは？カスハラの法的責任は？企業がとるべき対応は？

東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。この動きは自治体...