【HTML・CSS】tableのdisplay:block;について

Question

前提・実現したいこと

【HTML・CSS】のtableでスマホでは縦、パソコンでは横に表示したいです。

ここに質問の内容を詳しく書いてください。
@media (min-width : 600px)以降で、display:block;を無効にしても解除されず、うまく表示されません。@media (min-width : 600px)より後で、display:block;が解除できていないみたいなのですが、どうでしょうか。なにか解決策あればお願いいたします。

該当のソースコード

<table class="form">
<tr>
<th>お名前※</th>
<td><input size="30" type="text" name="お名前" /> </td>
</tr>
<tr>
<th>電話番号（半角）</th>
<td><input size="30" type="text" name="電話番号" /></td>
</tr>
<tr>
<th>Mail（半角）※</th>
<td><input size="30" type="text" name="Email" /> </td>
</tr>
<tr>
<th>お問い合わせ内容<br /></th>
<td><textarea name="お問い合わせ内容" cols="50" rows="5"></textarea></td>
</tr>
</table>

table.form{
  width:100%;
}
table.form th, 
table.form td {
  width:100%;
  display:block;
  border:1px solid #ccc;
  padding:10px;
  box-sizing: border-box;
}
table.form th {
  text-align: left;
  font-weight:normal;
  background:#efefef;
  margin-top:10px;
  border-bottom:0;
}
input[type="text"], 
textarea {
  width:100%;
  padding:5px;
  font-size:120%;
  display:block;
  box-sizing: border-box;
}
input[type="submit"], 
input[type="reset"], {
  display:block;
  width:100%;
  height:40px;
  margin-top:20px;
}



@media (min-width : 600px) {
table.form{
  width:100%;
}
table.form th, 
table.form td {
  width:100%;
  border:1px solid #ccc;
  padding:10px;
  box-sizing: border-box;
}
table.form th {
  text-align: left;
  font-weight:normal;
  background:#efefef;
  margin-top:10px;
  border-bottom:0;
}
input[type="text"], 
textarea {
  width:100%;
  padding:5px;
  font-size:120%;
  box-sizing: border-box;
}
input[type="submit"], 
input[type="reset"], {
  width:100%;
  height:40px;
  margin-top:20px;
}
}

試したこと

@media前後の違いは、display:block;があるかないかだけです。
@media (min-width : 600px)を (max-width : 600px)にかえて、前後逆にすると、うまく表示しました。じゃあ、(max-width : 600px)でしたらいいと思われるかもしれませんが、他のページに影響するので、できません。よろしくお願い申し上げます。

Comments

[m.ts10806]

tableでないといけないのでしょうか。むしろtableは不適当に思いますが・・

[yko450]

パソコン表示ではtableがきれいに出ると思った次第でして。

Answer 1

@mediaのないCSSは常に適用されますので、table.form th, table.form tdでかけたdisplay: block;は、@media(min-width : 600px)でも適用されてしまいます。

どうしても「全体でdisplay: block;をかけて、@mediaでそれを外す」という構造を維持しないといけないのであれば、@media(min-width : 600px)内のtable.form th, table.form tdでdisplay:table-cellをかけて上書きして戻す、という形になるかと思います。

Comments

[yko450]

できましたー！なるほど理解できました！ありがとうございました！