人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: osafree
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:スクロール ピクセル 大丈夫
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● fraise
●20ポイント

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

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

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

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

<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

◎質問者からの返答

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

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

↓がソースです。{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>


2 ● rokue
●20ポイント

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

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

◎質問者からの返答

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

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

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


3 ● Marine-Blue
●20ポイント

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

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


4 ● rokue
●20ポイント

説明不足ですみません。

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

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

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


5 ● fraise
●20ポイント

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

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

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

入力したソースに余分なタグが入り込んでしまいました。(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>

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ