- ベストアンサー
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）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
scroll="auto" を消す。
その他の回答 (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%; }
関連するQ&A
- テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
#test1はちゃんとスクロールバーが付くのに、 テーブル内の設定したセルにはスクロールバーが付きません。 tableタグやth,tdタブにも設定したりと色々しましたが、 付きません。 なぜなのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test page</title> <style type="text/css"> table { background:yellow; } th,td { width:200px; border:solid 1px #000000; overflow:scroll; } #test1 { width:100px; overflow:scroll; } </style> </head> <body> テーブル <br /> <table> <tr> <th>見出し１</th><td>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</td> </tr> <tr> <th>見出し２</th><td></td> </tr> <tr> <th>見出し３</th><td>本文</td> </tr> </table> <div id="test1">あああああああああああああああああああああああああああああああああ</div> </body> </html>
- ベストアンサー
- HTML
- CSSだけで、テーブルにスクロールバーを表示させたいのですが…
CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？ 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。
- ベストアンサー
- HTML
- テーブル内のスクロール
初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか？どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>
- ベストアンサー
- HTML
- tableの中にtableを作りスクロールさせたい。
tableの中にtableを作りスクロールさせたい。 tableの中にtableを作りスクロールさせたいのですが、書きサンプルで思うようになりません。 table一つなら上手くいくのですが、どこが悪いでしょうか。 <html lang="ja"> <head> <title></title> </head> <body> <table border="1" width="100%"><tr><td></td></tr> <tr> <td > <div style="height:40%;width:100%;overflow-y:scroll;"> <table border=1 width="100%" bgcolor="#9999ff"> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> </table> </div> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい
テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい テーブルの枠線とテキストフィールの枠を隙間なくピッチリとくっつけたい です。コードを掲示しますのでご存知の方はどなたか修正願います <body> <table width="900" border="1" style="height:25px;"> <tr> <td rowspan="2" width="400"> </td> <td rowspan="2" width="50"> </td> <td rowspan="2" width="100"><input type="text"readonly="readonly"value="サンプルシステム（株）" style="height:25px;"/> </td> <td rowspan="2" width="50"> </td> <td rowspan="2" width="100"><input type="text"readonly="readonly" value="システム管理者"style="height:25px;"/> </td> <td width="60"style="height:12px;">実施日</td> <td width="140"><input type="text" readonly="readonly" width="140"value="2010/07/01" style="height:12px;"/></td> <tr> <td height="19" style="height:12px;">CODE</td> <td><input type="text" readonly="readonly" width="140" value="TTSORD50P" style="height:12px;"/></td> </tr> </table> </body>
- ベストアンサー
- HTML
- ▲▲HTML・CSS TABLEから文字がはみ出す場合スクロールバーをつける？またCSSのBOXについて▲▲
例えば <table border="1" width="650" height="700"> <tr> <td></td> <tr> </table> 高さを700に設定しているので、中に文字を入力し700を超えるようであれば自動的に大きさが広がると思います。 その際TABLEの右側にスクロールをつけて、700をキープする事は可能でしょうか？ またCSSでスクロールバーつきのBOXを作ったときに横のスクロールバーだけを表示するように設定は可能でしょうか？？
- ベストアンサー
- HTML
- スクロール付きのテーブルで、内側に線を付ける方法
添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、 内側のテーブルとテーブルの間に破線をいれたいです。 しかし、CSSで設定しても破線も枠も表示されません。 こういう場合はどうすればいいのでしょうか？ <table id="j"> <tbody> <tr> <td> <DIV style="height:300px; overflow:auto;"> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> </div> </td> </tr> </tbody> </table> -----css------ #j{ cellpadding: 2; width: 520; background-color : #ffe3c8; border:1px solid #333; border-spacing:0; } } .t{ width: 500; height: 100; border:1px solid #333; } td{ cellspacing: 0; border-collapse: collapse; border-spacing:0; }
- ベストアンサー
- HTML
- テーブルのスクロールバーについて
HP作成初心者です。dreamweaver cs4を使っています。教えていただきたいのですが、テーブルの右の方にスクロールバーを取り付けたいのですが、そのやり方がわからず困ってます・・・ どなたか教えていただけないでしょうか？ <table width="500" height="150" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td> </td> </tr> </table> このようなソースなんですが、お手数かけますが、ご教授お願いします。
- 締切済み
- HTML
- テーブルのスクロールバーについて
HP作成初心者です。dreamweaver cs4を使っています。教えていただきたいのですが、テーブルの右の方にスクロールバーを取り付けたいのですが、そのやり方がわからず困ってます・・・ どなたか教えていただけないでしょうか？<table width="500" height="150" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td> </td> </tr> </table> このようなソースなんですが、どこに挿入したらいいんでしょうか？ お手数かけますが、ご教授お願いします。
- 締切済み
- HTML
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆
- ベストアンサー
- HTML
お礼
ご教授の通りにさせて頂いたところ 上手くいきました。 scrollを見落としていたようです・・。 皆さんありがとうございました。