テーブルのレスポンシブが上手く行きません

Question

テーブルのレスポンシブ

ここに質問の内容を詳しく書いてください。
html cssでお問い合わせフォームのスマホ版を作っています。
pc版ではthとtdが横に並んでいるので、スマホ版では縦に並べたいのですが
はみ出て表示がおかしくなります。

該当のソースコード

<div class="conteiner">
<table>
                <tr>
                    <th>お名前<span>必須</span></th>
                    <td>
                        <input type="text" name="name" value="" required placeholder="山田 太郎">
                    </td>
                </tr>
                <tr>
                    <th>ふりがな<span>必須</span></th>
                    <td>
                        <input type="text" name="name" value="" required placeholder="やまだ たろう">
                    </td>
                </tr>
                <tr>
                    <th>性別<span>必須</span></th>
                    <td>
                        <input type="radio" name="gender" value="man" checked required>男性 
                        <input type="radio" name="gender" value="woman"> 女性
                    </td>
                </tr>
</table>
</div>

@media screen and (max-width:420px) {
    .conteiner {
        width: 100%;
        margin: 0;
        & h2 {
            font-size: 20px;
            
        }
        & .form_text {
            font-size: 12px;
        }
        & ul {
            width: 100%;
        }
        & ul, table, p {
            font-size: 10px;
        }
        & table, tr, th, td {
            display: inline-block;
            margin: 0;
            padding: 5px;
            border: none;
            width: 100%;
            max-width: 420px;
            overflow:hidden; 
            }
    }

}

試したこと

displayをblockにしwidthを100%にしています。

Answer 1

PC版のwidthを消したら直りました。

Answer 2

以下を追加すると、崩れてみえないのでは..と思います。

@media screen and (max-width:420px) {
  .conteiner th {
    text-align: left;
  }
}

Comments

[haru-]

コメントありがとうございます。
試してみたのですが解決しませんでした、、、。
ちなみに@media内でwidthだけが効いておらず、pc版のままになっています。

[new1ro]

あまり関係ないと思うのですが
& table, tr, th, td {
の部分を、
& table,
& tr,
& th,
& td {
にしてみてください。

----
または
「max-width: 420px;」が意図通りではないかもしれないので
いったんコメントアウトして、想像する見た目になるか確認してください。

----
または
input[type="text"] {
width: 100%;
box-sizing: border-box;
}

[new1ro]

追記:
display: block;
box-sizing: border-box;
padding-left: 0;
padding-right: 0;
を追加してみてください。

table, tr, th, td {
/* 変更 */
/* display: inline-block; */
display: block;

/* 追加、padding-left: 0;とpadding-right: 0;があれば不要かもしれません */
box-sizing: border-box;

margin: 0;

/* 変更 */
/* padding: 5px; */
padding: 5px 0;

border: none;
width: 100%;
max-width: 420px;
overflow:hidden;
}