プロが教えるわが家の防犯対策術!

どなたかご教授下さい。
下記のHTMLコードを記述しています。楽天GOLDのサイトを制作しています。

WrapperからTABLEだけ出てるので、DREAMWEAVERのインスペクト機能を利用して実際に適用されているサイズを見たのですが、指定したサイズになっていないようです。

200で指定したwidthが215px 500pxで指定したwidthが527pxになっています。
ピッタリ700pxにしたいのですが、どのようにしたらよろしでしょうか?

<table width="750" border="1" class="payment_info_table">
<thead>
<tr>
<td width="200" class="payment_info_td1">カード会社</td>
<td width="500" class="payment_info_td2">支払方法</td>
</tr>
</thead>
<tbody>
<tr>
<td width="200" class="payment_info_td1">VISA</td>
<td width="500" class="payment_info_td2">リボ,分割(3,5,6,10,12,15,18,20,24 回が可能です)</td>
</tr>
<tr>
<td width="200" class="payment_info_td1">MASTER</td>
<td width="500" class="payment_info_td2">リボ,分割(3,5,6,10,12,15,18,20,24 回が可能です)</td>
</tr>
<tr>
<td width="200" class="payment_info_td1">JCB</td>
<td width="500" class="payment_info_td2">リボ,分割(3,5,6,10,12,15,18,20,24 回が可能です)</td>
</tr>
<tr>
<td width="200" class="payment_info_td1">AMEX</td>
<td width="500" class="payment_info_td2">分割(3,5,6,10,12,15,18,20,24 回が可能です)</td>
</tr>
<tr>
<td width="200" class="payment_info_td1">Diners</td>
<td width="500" class="payment_info_td2">リボ</td>
</tr>
</tbody>
</table>

A 回答 (2件)

こんにちは



ご提示のHTMLでは2列の表で
TABLE width:750px
1列目 width:200px
2列目 width:500px
が指定されています。

構文的におかしかったり、矛盾した指定がある場合でも、ブラウザは極力表示しようとしますが、その際にどう解釈(修正)されるかはブラウザ依存だと思います。
まずは、親要素を700pxにしてみてはいかがですか?


なお、一般的に要素の幅(width)は、margin、padding、border-widthなどと関連して決められています。
https://developer.mozilla.org/ja/docs/Web/CSS/Bo …

また、その計算にどのような方法を用いるかを指定することも可能です。
https://developer.mozilla.org/ja/docs/Web/CSS/bo …

tableの場合には、上記の他にも、cellspacing (border-spacing)等も関係していますので、無駄に悩まないためにも、このあたりを整理して覚えておくとよろしいのではないでしょうか。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
親要素のサイズ自体の指定が間違えてました。

ありがとうございました。

お礼日時:2017/04/20 13:41

これでは解らない。


class="payment_info_td1"なその部分がミソ。

CSSのクラスセレクタのpayment_info_td1などが、どの様に設定されているかが解らないと、ドーし様もないよ。

CSSの提示が必須。

class="payment_info_td1"の部分がミソ。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
親要素のサイズ指定が間違えてたみたいです。

お礼日時:2017/04/20 13:41

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!