どなたかご教授下さい。
下記の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>
No.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)等も関係していますので、無駄に悩まないためにも、このあたりを整理して覚えておくとよろしいのではないでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- Perl PERL 1 2022/04/26 14:15
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルの行の高さを指定する...
-
文字列が入っているtdを削除せ...
-
cssで、表示されるテキストによ...
-
HTMLで文とテーブルの間が空く。
-
EXCELのセル内にHTMLタグを含む...
-
テーブルの表示がずれます
-
tableタグ内で、空白セルでも罫...
-
テーブルのヘッダとボディの幅...
-
HTMLのテーブルで桁をそろ...
-
逆L字の表(table)組み
-
tableでcolspanを使うと次行以...
-
表の1列だけをCSSを使って右揃...
-
tableの要素(tr、td)に一...
-
ホームページ 表の上の余白を...
-
tableにtableをネストした場合
-
ラジオボタンの選択範囲について
-
テーブルの任意の列を非表示に...
-
HTML <td></td>タグ セル内余...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
HTML <td></td>タグ セル内余...
-
cssで、表示されるテキストによ...
-
テーブルの表示がずれます
-
テーブルの行の高さを指定する...
-
中に<table></table>が使えるア...
-
テーブルのセルに画像をピッタ...
-
スタイルシートで colspan=3と...
-
ホームページ 表の上の余白を...
-
EXCELからhtmlへの変換で罫線が...
-
表の1列だけをCSSを使って右揃...
-
tableの要素(tr、td)に一...
-
逆L字の表(table)組み
-
テーブルタグのセルの幅の一部...
-
HTMLで外部ファイルの読み込み
-
表の中の列の順番を入れ替える...
おすすめ情報