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の高さがブラウザの表示範囲の中に収まるので
横スクロールバーは出ませんが、
収まらないときには横スクロールバーが出てしまいます。
横スクロールバーを出さないようにするにはどうすればよいのでしょうか?
分かりにくい箇所があればご指摘をお願いします。
回答をお待ちします。
No.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>
この回答への補足
説明不足でした。申し訳ありません。
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%;
}
No.2
- 回答日時:
で、htmlダグは?
また
>収まらないときには横スクロールバーが出てしまいます。
ですが、
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
こういう書き方でもでるのか?
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
っと横長の時に出るのかもわからないと。
この回答への補足
横に長い文章はtableの端で改行されます。
しかし、<br>や<p>等が多くて縦長になり、
ブラウザのステータスバーの辺りを超えると
横スクロールバーが出てしまいます。
また、横スクロールバーが出ても
table自体の幅は変わりませんでした。
No.3
- 回答日時:
画像の幅だけ考えてませんか?
テーブルのボーダーの幅も考えてレイアウトしてみて。
この回答への補足
申し訳ありません。
画像は背景で表示させているので、
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>
間違っている箇所と共に
原因も教えていただけると幸いです。
宜しくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルで3セル作った行の下に...
-
表の中に表
-
写真のレイアウトで横並びにす...
-
文字サイズ変更でテーブル要素...
-
Excelで可視部分だけをWeb形式...
-
table内で画像と文字をセンター...
-
<tbody>は何のためにあるんでし...
-
htmlでテーブル内にテキストボ...
-
CSSのtransform: translate(-50...
-
Excel セルの幅が合わない
-
実行結果をデジタル時計みたい...
-
aタグに直接style=""で:hoverを...
-
エクセルで一部分のセルの高さ...
-
ホームページビルダーの表にお...
-
インラインフレームの表示位置...
-
HTMLフォームのSELECTの幅を一...
-
表の幅が広がる
-
FireFoxで見るとブラウザの幅に...
-
<h1>タグの後の行間を詰めたい。
-
Excelの列や行の幅を表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
table内で画像と文字をセンター...
-
表の中に表
-
HTMLでテーブルを縦に並べたい!
-
Excelで可視部分だけをWeb形式...
-
テーブルで3セル作った行の下に...
-
<td> 内のテーブルを上寄せにす...
-
表の中でのフォーム
-
CSS line-height が効かない
-
テーブルの中のグラデーション...
-
テーブルとテーブルの間に、隙...
-
セルの背景画像を、繰り返さず1...
-
cssのfont-sizeがFirefoxで効か...
-
innerHTMLを使わずに…
-
Jimdoで表組のなかの画像をポッ...
-
Firefox2で縦方向に隙間が出来...
-
スタイルシートで<table>の内側...
-
ヤフーストアのブースのカスタ...
-
Dreamweaverでソースが横一列に...
-
width="150" に収まるように・...
-
壁紙に複数の画像を使いたい
おすすめ情報