横スクロールバーについて。

幅が700ピクセルのtableを中央に配置しています。縦スクロールが出ない高さですと大丈夫なのですが、縦スクロールが出る高さにすると一緒に横スクロールも出てしまいます。(縦スクロールの幅分位だけ)
tableの幅を小さくしてもやはり、縦スクロールが出る高さにtableの高さを設定すると横スクロールが出てしまうのです・・。
どうすれば解決するのでしょうか??

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2009/01/04 21:15:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答5件)

id:fraise No.1

回答回数368ベストアンサー獲得回数21

ポイント20pt

もっと良い方法があるかと思いますが、

とりあえず横スクロールバーを表示したくないのであれば

下記で表示されないようにすることができます。

縦スクロールはスクロールが必要であれば表示されます。

<style type="text/css"></p> <p><!--</p> <p>table {</p> <p>overflow: auto;</p> <p>overflow-x: hidden;</p> <p>overflow-y: auto;</p> <p>}</p> <p>--></p> <p></style>

http://www.tagindex.com/stylesheet/page/overflow_hidden.html

id:osafree

ご返答ありがとうございます。

早速試してみたのですが。。うまくいきませんでした。

↓がソースです。{overflow}の書き込む場所はココで良いのでしょうか??

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<title>無題ドキュメント</title>

<style type="text/css"></p> <p><!--</p> <p>body {</p> <p> overflow: hidden;</p> <p> margin-left: 0px;</p> <p> margin-top: 0px;</p> <p> margin-right: 0px;</p> <p> margin-bottom: 0px;</p> <p> background-color: #333333;</p> <p>}</p> <p>--></p> <p></style></head>

2008/12/29 10:29:58
id:rokue No.2

回答回数9ベストアンサー獲得回数0

ポイント20pt

同様の症状を経験したことがないので、検証せずにこたえてしまいますが、縦スクロールのみを表示させたいのであれば、tableをdivなりで囲んでoverflow:auto;とすれば実現できるかと思います。

tableの幅が上位のdivを超えてしまった場合の動作はわかりませんが。

id:osafree

ご返答ありがとうございます。

bodyのすぐ下に書いてtableを囲んだのですがうまくいきませんでした。

どこが違うのでしょうか??

2008/12/29 10:43:56
id:Marine-Blue No.3

回答回数238ベストアンサー獲得回数12

ポイント20pt

どっか他の部分の幅100%設定などが影響しているようにも見えますが、ソースコードが分からないので具体的な原因を見抜くことは困難だと感じます。

HTMLとCSSのソースをお見せいただくことは出来ませんか?

id:rokue No.4

回答回数9ベストアンサー獲得回数0

ポイント20pt

説明不足ですみません。

overflow:auto;でスクロールを表示させる際は、tableを囲むdivのwidthを決め打ちしてください。この場合、縦のみ表示させるので、divのwidthはtable幅を超えない範囲(今回は700pxで良いかと思います)で指定します。

heightは指定しなくても大丈夫だと思いますが、色々試してみてください。

私には不思議に思える症状ですので、閲覧環境など教えていただければと思うのですが。

id:fraise No.5

回答回数368ベストアンサー獲得回数21

ポイント20pt

コメントがつけられませんので、もう一度回答欄から失礼いたします。

また、雑な回答をしてしまいまして申し訳ありません。

はてなの記入法がよくわかっていなかったようで、

入力したソースに余分なタグが入り込んでしまいました。(pタグ)

そちらはすべて省いてください。

念のために、リンク先の情報もご参照いただければ幸いです。

正しくはこちらのようになります。

overflow:hiddenにすると、縦も横も両方非表示になりますのでご注意ください。

また、マージンも設定するのであればもっとシンプルに書けますよ。

※下記は、マージン、背景色はテーブルに設定してあります。

<html>
<head>
<title></title>
<style type="text/css"> <!-- table{ overflow: auto; overflow-x: hidden; overflow-y: auto; margin: 0; background-color: #333333; } </style> </head>

※ソース、ひとつずつ改行させたかったのですができませんでした。

はてなの書き方、よくわかりません・・・

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません