ここから本文です

ワードプレスで固定ページを作成しており、テーブルタグをどう頑張っても携帯表示...

s_m********さん

2018/6/1706:12:37

ワードプレスで固定ページを作成しており、テーブルタグをどう頑張っても携帯表示で、左側につまってしまうのを解消したいです。

タグを載せますので、変なところがありましたら教えてください。

PCからだと、画像はテーブルより小さいからだと思いますが、中央に寄って表示されています。
携帯からだと、テーブルの中が全て左につまっています。
センタータグは使っています。



<table style="border: 5px solid gray;" width="100%" cellpadding="10" align="center">
<tbody>
<tr>
<td bgcolor="#dcdcdc">
<h2 style="text-align: center;"><span style="color: black; font-size: x-large;">ランニングコスト</span></h2>
</td>
</tr>
<tr>
<td style="border-top: 2px solid gray;" align="center">
<p><img class="aligncenter size-full wp-image-295" src="画像URL" alt="" width="400" height="300" /></p>
<table style="border: 1px dimgray solid;" width="60%" cellspacing="10" cellpadding="10" align="center" bgcolor="#d3d3d3">
<tbody>
<tr>
<td colspan="2" align="center" bgcolor="white"><span style="color: black; font-size: x-large;"><b>文字</b></span></td>
</tr>
<tr bgcolor="white">
<td>1</td>
<td>1”</td>
</tr>
<tr bgcolor="white">
<td>2</td>
<td>2”</td>
</tr>
<tr bgcolor="white">
<td>3</td>
<td>3”</td>
</tr>
</tbody>
</table>
<table style="border: 1px dimgray solid;" width="60%" cellspacing="10" cellpadding="10" align="center" bgcolor="#d3d3d3">
<tbody>
<tr>
<td colspan="2" align="center" bgcolor="white"><span style="color: black; font-size: x-large;"><b>文字</b></span></td>
</tr>
<tr bgcolor="white">
<td>1</td>
<td>1”</td>
</tr>
</tbody>
</table>
&nbsp;</td>
</tr>
</tbody>
</table>



どこにスペースキーを入れたら、左右均等に間が空いて、中央に表示されるでしょうか?

td&amp;gt,tr&amp;gt,center&amp;quot,white&amp;quot,tbody&amp;gt,5px solid gray,tr style

閲覧数:
23
回答数:
2
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

yoy********さん

2018/6/1711:34:32

私もWordPressしておりまして、試しに質問者が掲示したコードで試したらアウトでした。

そこで、コードの一部を変更しました。

<div style="border: 5px solid gray;width:80%;margin:0 auto;text-align:center;">
<div style="background-color:#dcdcdc;">
<h2 style="text-align: center;color: black; font-size: x-large;">ランニングコスト</h2>
<p style="border-top: 2px solid gray;text-align: center;">
<img class="aligncenter size-full wp-image-295" src="画像URL" alt="" width="400" height="300" />
</p>
</div>
<table style="border: 1px dimgray solid;text-align: center;background-color:#d3d3d3;" cellspacing="10" cellpadding="10">
<tr>
<td style="color: black; font-size: x-large;background-color:white;" colspan="2"><b>文字</b></td>
</tr>
<tr style="background-color:white;">
<td>1</td>
<td>1”</td>
</tr>
<tr style="background-color:white;">
<td>2</td>
<td>2”</td>
</tr>
<tr style="background-color:white;">
<td>3</td>
<td>3”</td>
</tr>
</table>
<table style="border: 1px dimgray solid;text-align: center;background-color:#d3d3d3;" cellspacing="10" cellpadding="10">
<tr>
<td style="color: black; font-size: x-large;background-color:white;" colspan="2"><b>文字</b></td>
</tr>
<tr style="background-color:white;">
<td>1</td>
<td>1”</td>
</tr>
</table>
</div>

このコードで解決です。
尚、
<div style="border: 5px solid gray;width:80%;margin:0 auto;text-align:center;">

この中の「width:80%」を「width:100%」以外の幅で調節して下さい。

それと、
<table style="border: 1px dimgray solid;text-align: center;background-color:#d3d3d3;" cellspacing="10" cellpadding="10">

この中にある「text-align: center;」は、私がCSSに切り替えて入れました。理由は、「align="center"」や「bgcolor="white"」などの属性はhtml5から廃止されています。

ベストアンサー以外の回答

1〜1件/1件中

プロフィール画像

カテゴリマスター

des********さん

2018/6/1709:14:50

提示されているコードでは問題なさそうですよ。

それ以外のコードが関係しているのではないでしょうか。


参考まで。

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる