詳しい人求む！

Tableが指定した通りのサイズにならない。

解決済

  • 質問者：エビゾー
  • 質問日時：2017/04/19 18:16
  • 回答数：2件

どなたかご教授下さい。
下記の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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「楽天 ゴールド」に関するQ&A： 楽天銀行デビットカード（ゴールド）

さらに表示

「楽天 gold」に関するQ&A： 楽天ＧＯＬＤの転送について

A 回答 (2件)

参考程度に

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：2017/04/20 09:07

こんにちは



ご提示の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

No.1

  • 回答者： t_fumiaki
  • 回答日時：2017/04/19 19:17

これでは解らない。


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

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

CSSの提示が必須。

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

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

通報する
お礼日時：2017/04/20 13:41

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aと関連する良く見られている質問

Q と、

<td></td> と、<td><BR></td>

ホームページビルダーで作ったホムペを、KompoZerというHTMLエディタで開くと、
テーブルのなにも入っていないセルに<BR>タグが勝手に挿入されてしまいます。
<td></td> と、<td><br></td> は、
ブラウザ上ではどちらでもちゃんと表示されるのですが、
HTML文法的にはどちらが正しいのでしょうか？
また、どちらも正しい場合、<br>がある・ないで、違いがあるのでしょうか？

※ホームページビルダー、KompoZerの善し悪しは無視してください。

Aベストアンサー

文法的にはどちらも正しいです。
ブラウザの種類やHTMLのモードによって、tdが空だと、見え方が違うケースがあります。
tableでborderを指定したときに、へこんで見えるかどうか。空でないとかならずへこんで見えます。

他の回答も見る

Q■　でテキストボックスとセルの間にわずかな隙間があいてしまう・・

<TABLE>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
</TALBLE>

こう書くときに、テキストボックスの下にわずかな隙間が
できるのを防ぎたいのですが、何か方法はありませんでしょうか？

Aベストアンサー

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ～>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>
</TABLE>
としていませんか？
HTMLとしては好ましくないと思いますが、<FORM>や</FORM>の前後にある<TR><TD>～</TD></TR>を取り除き、以下の様にします。
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<FORM ～>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD><INPUT TYPE="TEXT"></TD>
</TR>
<!-- ここまで -->
</FORM>
</TABLE>

尚、表の罫線を残すのであればBORDERを変更したりしてください。

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ～>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>...続きを読む

他の回答も見る

Q

タグ、
～～　を表示することはできますか？

テーブルタグ
<table>
<tr>
<td>

をそのまま文字として表示することはできますでしょうか？

<を全角の＜にすればいいのでしょうが、なにぶん、テーブルタグの量が膨大なため、手でいちいち直してたら数ヶ月、数年かかってしまいます。

タグをそのまま画面に表示させる良い方法はないでしょうか？

詳しい方いらっしゃいましたら教えていただけないでしょうか？

よろしくお願いします！

Aベストアンサー

タグの無効化というタグです

<xmp>タグ</xmp>　タグを無効化にして文字として表示されます
良かったら使ってみて下さい

他の回答も見る

Q
タグ

テーブルでレイアウトを行い、htmlで背景色・cssで文字のスタイルを適用する場合、<tr>タグと<td>タグのどちらに記述するのがよいのでしょうか。IEだと大差は無いようなのですが、firefoxやNetscapeで違いが出てくるように感じます（特にfirefox）。

(1)cssで文字スタイルの場合、<table>タグに<table class="text">といった感じで問題ないでしょうか（table内の文字すべてclassがtextの場合）。それともやはり<td>タグひとつひとつにクラス指定した方が良いのでしょうか。

(2)テーブルに背景色を指定する場合、<tr>タグ・<td>タグのどちらに指定するのが良いのでしょうか。

Aベストアンサー

(1)TDタグひとつひとつにCLASS属性を設定してください。TABLEタグにCLASS属性を設定しても、子要素にあたるTDタグにまではCSSが適用されたりされなかったりする場合があります。また、TDタグひとつひとつを細かく修正することになった場合、TABLEタグに設定したCSSが意図しない影響を及ぼすかもしれません。

(2)TDタグに指定してください。

概して、TRタグにCLASS属性、あるいはその他の属性を設定することはありません。環境によってTRタグの解釈にバラつきがあるというだけではなく、単に標準的な記述ではないという理由によります。
すなわち、好まれません。

他の回答も見る

Q

が

になってしまう。

標記の件ですが、<h2></2>で囲みたいのに<h2 class="class"></h2>で囲まれてしまいます。

どうやらスタイルシートのせいだと思うのですが、
これはどちらもh2の効果はあるのでしょうか？

よろしくお願いいたしますm(_ _)m

Aベストアンサー

>これはどちらもh2の効果はあるのでしょうか？

質問の意味があいまいですが、SEO対策の効果は同等でしょう
スタイルシートによるビジュアルの効果は設定したclassによって
異なるものになります

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報