テーブルにスクロールバーを付ける方法を教えて下さい。

解決済

質問者：poupou
質問日時：2006/01/13 21:06
回答数：3件

今HPを作ってまして分からない事だらけなのでお知りな方力をお貸し下さい。
セル内に文を書いてるのですが間延びするのが嫌なのでスクロールバーをつけようかと思うのですがドリームウェーバー（MAC)でやり方を教えてください。よろしくお願い致します。その他の質問も教えて頂けるとありがたいです。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.2ベストアンサー

回答者： seaw
回答日時：2006/01/13 22:31

3o-clockさんが、overflow:scroll;でやる方法を挙げてくださっていますが。

overflow: auto;を使う方法もあります。

※参考
http://www6.plala.or.jp/go_west/nextcss/ref/prp/ …

一応サンプルを作っておきました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<style type="text/css">
body
{
background-color: #ffffff;
color: #000000;
}

table.sample
{
background-color: #000000;
border: 1px solid #000000;
width: 400px;
hight: 400px;
}
table.sample td
{
background-color: #ffffff;
border: 0;
padding: 3px;
}
table.sample td div
{
width: 200px;
hight: 200px;
overflow: auto;
}
</style>
<title>サンプル</title>
</head>
<body>

<table class="sample" cellspacing="1">
<tr>
<td>AAAAAAAAAA</td>
<td>BBBBBBBBBB</td>
</tr>
<tr>
<td>CCC</td>
<td>
<div>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
</div>
</td>
</tr>
</table>

</body>
</html>

- 0
- 件

通報する

No.3

回答者： noname#19206
回答日時：2006/01/14 00:05

テーブルの中身をスクロールさせるのは、確か環境によって認識状態がかなり変わったと思います。

IEにはコレに関するバグがあるとも解説書で読みました（ややうろ覚え）
テーブルの外側からスクロールさせることをお勧めします。

あと、#1 3o-clockさんが提示されているリンク先のソースだと、非IE環境で派手に表示が崩れます…。
（HTMLの仕様上、本来overflowはdivやpなどブロック要素にしか適用できない。）

↓こんな感じで…。

<div style="width:400px;overflow:auto;">
<table border width="800">
<tr>
<td>AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA
</td>
<td>AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA
</td>
</tr>
<tr>
<td>AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA
</td>
<td>AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA
</td>
</tr></table>