スマホでの表の表示の仕方

Question

###前提・実現したいこと
今、ワードプレスでブログを書いていて、パソコンでは表の表示が枠内に収まっているのですが、スマホでは表が枠(スマホの画面で右にスクロールしないと表がみれない)の外にはみ出して、見え方が汚くなってしまいす。
スマホでサイトを見たときに、それぞれのスマホの大きさに合わせて、表のサイズを対応させたいです。
###発生している問題・エラーメッセージ
スマホでの表の表示のされ方がパソコンと違う

エラーメッセージ

スマホでは枠をはみ出してしまう
###該当のソースコード

<table style="width: 428px; height: 477px;">
<tbody>
<tr>
<td style="border-color: #000000; background-color: #969090; width: 184px;"></td>
<td style="width: 209px;"></td>
</tr>
<tr>
<td style="border-color: #000000; background-color: #969090; width: 184px;"></td>
<td style="width: 209px;"></td>
</tr>
<tr>
<td style="border-color: #000000; background-color: #969090; width: 184px;"></td>
<td style="width: 209px;"></td>
</tr>
</tbody>
</table>
このコードを使いました。

###試したこと
課題に対してアプローチしたことを記載してください
スマホに合わせて表を小さくするとパソコンでも小さくなってしまった。
パソコンもスマホも同じようにしたいです。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

<table style="width: 100%;">

で親要素に対して100%で表示。スマホではみ出してしまうことは無くなります
<td>のwidth: ***px;は削除してしまいましょう

PCで見た時に大きくなりすぎてしまうようなら、max-widthなどで対応してください。

Comments

[puyopuyo]

ご回答ありがとうございます。
治りました！