ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：rakuda2525 テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
困り度：
  • すぐに回答を！
 #test1はちゃんとスクロールバーが付くのに、
テーブル内の設定したセルにはスクロールバーが付きません。
tableタグやth,tdタブにも設定したりと色々しましたが、
付きません。
なぜなのでしょうか。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">​
<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>
質問投稿日時：08/03/16 05:33
質問番号：3866911
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：abril > なぜなのでしょうか。

overflowプロパティの適用対象はblock要素”display : block”ですが、<td>／<th>はそれぞれtable要素のグループであり”display : table-cell”ですので適用外となります。
なので、ANo.1の回答者様の仰る通り、セルの中に更にblock要素のタグを入れた上で、それに対するスタイル設定でoverflowプロパティを使用して下さい。
（overflowプロパティ参考）​http://w3g.jp/css/display_position/overflow​
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/03/16 12:16
回答番号：No.2
この回答へのお礼ありがとうございました！解決しました！

回答

良回答10pt
回答者：auty セルの中に、<div>タグを入れてみたらどうでしょうか。

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

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

<td>
<div class="sc">
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
</div>
</td>
-----------------------------------------------
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/03/16 06:47
回答番号：No.1
この回答へのお礼ありがとうございました！解決しました！
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ