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

解決済みの質問

tableで横スクロールバーが・・

tableの高さがブラウザの表示範囲を超えると
少しだけ右の方に空白ができ、
横スクロールバーが出てきて醜い状態になってしまいます。

タグは、大まかにこのような感じで、
外部スタイルシートを適用させていて、
tableには枠線をつけています。


<body scroll="auto">
<table style="width:720px;" class="枠線、パディング、マージン等">
<tr>
<td colspan="2" style="background-image:url("***.jpg(720x150pxの画像)");
width:720px;height:150px;">
<a href="リンク">リンク</a>
</td>
</tr>
<td colspan="1" width="100%">
<!メニュー部分>
</td>
<td colspan="1">
<!本文部分>
</td>
</tr>
<tr>
<td>
<!著作権表示>
</td>
</tr>
</table>
</body>

本文が少なければ、tableの高さがブラウザの表示範囲の中に収まるので
横スクロールバーは出ませんが、
収まらないときには横スクロールバーが出てしまいます。

横スクロールバーを出さないようにするにはどうすればよいのでしょうか?
分かりにくい箇所があればご指摘をお願いします。
回答をお待ちします。

投稿日時 - 2005-12-06 23:40:51

QNo.1824049

困ってます

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

scroll="auto"
を消す。

投稿日時 - 2005-12-07 19:52:45

お礼

ご教授の通りにさせて頂いたところ
上手くいきました。
scrollを見落としていたようです・・。
皆さんありがとうございました。

投稿日時 - 2005-12-07 20:50:43

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

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

回答(4)

ANo.3

画像の幅だけ考えてませんか?
テーブルのボーダーの幅も考えてレイアウトしてみて。

投稿日時 - 2005-12-07 18:06:40

補足

申し訳ありません。
画像は背景で表示させているので、
table自体には影響は無いと思います。

下のようなソースに改変して、
cssを解除してみましたが、

それでも横スクロールバーが出るので
HTMLがおかしいのかもしれません。

<!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-Language" content="ja">
<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">
<title>Anonymous</title>
</head>
<body scroll="auto">
<table style="width:720px;" summary="Anonymous">
<tr>
<td>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A
</td>
</tr>
</table>
</body>
</html>
間違っている箇所と共に
原因も教えていただけると幸いです。
宜しくお願い致します。

投稿日時 - 2005-12-07 18:56:37

ANo.2

で、htmlダグは?

また
>収まらないときには横スクロールバーが出てしまいます。
ですが、
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
こういう書き方でもでるのか?
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
っと横長の時に出るのかもわからないと。

投稿日時 - 2005-12-07 17:30:35

補足

横に長い文章はtableの端で改行されます。

しかし、<br>や<p>等が多くて縦長になり、
ブラウザのステータスバーの辺りを超えると
横スクロールバーが出てしまいます。

また、横スクロールバーが出ても
table自体の幅は変わりませんでした。

投稿日時 - 2005-12-07 18:36:42

ANo.1

基本的に高さや幅の部分の書き方がまずおかしい。
枠線、パディング、マージン等こういう部分が大事なのに
あえて伏せてるので、わからない。
テーブルに関係している外部cssはなんて書いてあるのか?

<table width="720" STYLE="border: 1px #000000 solid;">
<tr>
<td colspan="2" style="background-image: url('***.jpg');" width="720" height="150">
<a href="リンク">リンク</a>
</td>
</tr>
<td colspan="1" width="100%">
<!メニュー部分>
</td>
<td colspan="1">
<!本文部分>
</td>
</tr>
<tr>
<td>
<!著作権表示>
</td>
</tr>
</table>

投稿日時 - 2005-12-07 01:02:45

補足

説明不足でした。申し訳ありません。
tableについてのcssはこのように設定しています。

body{
color:#666666;
margin:0px;
padding:0px;
line-height:170%;
letter-spacing:0px;
text-align:center;
font-size:12px;
background-image:url(../
***.jpg);
}
table{
background-color:;
border:1px solid #6699ff;
margin:0px;
padding:0px;
text-align:left;
}
tr{
vertical-align:top;
}
th,td{
background-color:#ffffff;
border:1px solid #666666;
margin:0px;
padding:4px;
vertical-align:top;
}
.main_left{/*メニュー部分*/
width:160px;
line-height:120%;
}
.main_right{/*本文部分*/
width:560px;
line-height:120%;
}

投稿日時 - 2005-12-07 14:30:26

あなたにオススメの質問