- ベストアンサー
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の高さがブラウザの表示範囲の中に収まるので 横スクロールバーは出ませんが、 収まらないときには横スクロールバーが出てしまいます。 横スクロールバーを出さないようにするにはどうすればよいのでしょうか？ 分かりにくい箇所があればご指摘をお願いします。 回答をお待ちします。
- jos_matter
- お礼率66% (8/12)
- CSS
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (3)
- Kuppycat
- ベストアンサー率50% (109/216)
画像の幅だけ考えてませんか？ テーブルのボーダーの幅も考えてレイアウトしてみて。
補足
申し訳ありません。 画像は背景で表示させているので、 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> 間違っている箇所と共に 原因も教えていただけると幸いです。 宜しくお願い致します。
で、htmlダグは？ また >収まらないときには横スクロールバーが出てしまいます。 ですが、 a<br> a<br> a<br> a<br> a<br> a<br> a<br> こういう書き方でもでるのか？ aaaaaaaaaaaaaaaaaaaaaaaaaaa<br> っと横長の時に出るのかもわからないと。
補足
横に長い文章はtableの端で改行されます。 しかし、<br>や<p>等が多くて縦長になり、 ブラウザのステータスバーの辺りを超えると 横スクロールバーが出てしまいます。 また、横スクロールバーが出ても table自体の幅は変わりませんでした。
基本的に高さや幅の部分の書き方がまずおかしい。 枠線、パディング、マージン等こういう部分が大事なのに あえて伏せてるので、わからない。 テーブルに関係している外部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>
補足
説明不足でした。申し訳ありません。 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%; }
お礼
ご教授の通りにさせて頂いたところ 上手くいきました。 scrollを見落としていたようです・・。 皆さんありがとうございました。