ＨＰ作成中。テーブルの中のセルの設定が変。

質問

お世話になります。
抽象的で申し訳ありませんが、ＨＰの中でテーブルを作成しています。
テーブルのセルで、特に右のスペースを指定していません。
が、なぜか右にスペースが設定されているようになっています。
これは、text-align: right;　としてみてわかったのですが、
本来なら右端にうつるはずが、スペースができていました。
どこで設定しているのでしょうか。
どこかの設定に引きずられているのかとも思ったのですが、他でも右スペースの指示はしていません。
何が考えられますか。

回答No.2

mohumohu23 · ベストアンサー

(´・ω・｀)・・・

まぁ、たぶん今俺が書き込む前に気付いてるとおもうけど
右のセルでwidth300てしてるんにpaddingで左に80px　70pxて郵便とグラフィック載せるセルにしてるじゃないですか。
そういう風に指定するとそのセルの大きさ自体は一番多いpaddingとってるg1につられて380pxの幅をとっちゃうんですよ。実質的に。
http://digilog.client.jp/css/margin-padding.html
これを見るとわかるように。
DTDを正しくセッティングしたなら正しい解釈のほうでレンダリングされるんですが、縮小されてて質問についてる画像みえにくいですが、これは互換モードっぽいですね。ちょっと正しくない解釈でレンダリングされてるようですが、この場合でもie7では幅は380px分とっちゃうようですね。
でも内容の幅は300pxて指定されてるんで、そのセルの300px分がそのセル内でデータが表示される範囲だとされて、右に80px分の余白があいちゃうんですよ。
DTD指定したほうがいいですよ。
あとボーダーのラインの指定が１て端的に書かれてますが1pxと明示しましょう0は単位いらないです。。

回答No.3

mohumohu23

反応が無いのでどうなったのかわからんけど。
解決策としては
padding-leftで左にスキマ空けたぶんだけwidthをひいてやる。
郵便のとこだったら70pxとってるから、実質300pxのセルにしたければ
そこのCSSではwidth230px

お礼

回答していただいていたのもかかわらず、お返事せず、申し訳ありませんでした。
別仕事をかかえてしまい、こちらをおろそかにしてしまっていました。
ご指摘どおり、幅指定を変更したら、思ったように表示されました。
参考ＵＲＬ載せていただいたものを読んで、余白の関係をやっとこさ理解できたような気がします。
本当にありがとうございました。

回答No.1

mohumohu23

こういう場合はソースをはりつけてください。
あと現象が起こってるブラウザとバージョンも。

まぁおそらくセルの横幅設定がされてるんでないかとおもいます。

補足

失礼しました。ソースというのは以下のことでしょうか。
文字制限ひっかかりましたので、必要そうなところだけ。
これが問題のテーブルです。
あと、ブラウザがどうとかではなく、作成の段階なのですが。
HTML project2 というフリーソフトを使用していて、ＩＥで表示として確認すると変なのです。

<a name="company"><p class="c2"><u>1.会社概要</u></p></a>

<table class="t1" cellpadding="0">
<tr><td class="左側">会社名</td><td class="右側">株式会社あああ</td></tr>
<tr><td class="左側">代表者</td><td class="右側">いいい</td></tr>
<tr><td class="左側">創立</td><td class="右側">２００８年２月８日</td></tr>
<tr><td class="左側"rowspan="2">所在地</td><td class="郵便"> 〒608-4147　<div>住所</div></td></tr>
<tr><td class="g1"><a href="map.html" target="_blank"><img src="maplink.gif" style="border:0; width:200;height:30;" alt="地図はこちら"></a></td></tr>
<tr><td class="左側">電話番号</td><td class="右側">085-145-8954</td></tr>
<tr><td class="左側">ＦＡＸ番号</td><td class="右側">025-547-8545</td></tr>
<tr><td class="左側">資本金</td><td class="右側">１０００万円</td></tr>
</table>

CSSは以下。

table.t1{border: 1 solid;font-size: 14px;height: 300px;}

td.左側{text-align:center;background-color: #FFCCCC;width:160px;border: 1 solid;}
td.右側{width:300px;border: 1 solid;background-color:#ffffff;text-align: right;}
td.郵便{background-color:#ffffff;width:300px;padding-left:70px;height:50px;border-left:1 solid;border-right: 1 solid;border-top: 1 solid;border-bottom: 0;}
td.g1{width:300px;padding-left:80px;height: 35px;border-left:1 solid;border-top:0 solid;border-right:1 solid; border-bottom:1 solid;background-color:#ffffff;}