Html 如何使用媒体查询调整窗体/表的大小

这是我的密码：

<form name="htmlform" method="post" action="html_form_send.php">
<div id="table">
<table width="400px" style="margin-top: 50px; margin-left: 20px; color: #FFF">
</tr>
<tr>
<td valign="top">
<label for="name">Name *</label>
</td>
<td valign="top">
<input  type="text" name="name" maxlength="50" size="30" style="margin-bottom: 10px">
</td>
</tr>


<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input  type="text" name="email" maxlength="80" size="30" style="margin-bottom: 10px">
</td>

</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input  type="text" name="telephone" maxlength="30" size="30" style="margin-bottom:    10px">
</td>
</tr>
<tr>
<td valign="top">
<label for="enquiry">Enquiry *</label>
</td>
<td valign="top">
<textarea  name="enquiry" maxlength="1000" cols="32" rows="6"></textarea>
</td>

</tr>
<tr>
<td colspan="2" style="text-align:center">

<input type="submit" value="Submit">  
</td>
</tr>
</table>
</div>
</form>

上面的css不起作用，它调整了div的大小，但是内容仍然是原始大小，即使我把表单放在div中，它仍然不起作用，也许div不是必需的。。。任何帮助都将获得巨大的荣誉

---

谢谢

它不起作用，因为您的表有一个样式，该样式表示表的宽度为400px。试着说：

<table style="margin-top: 50px; margin-left: 20px; color: #FFF; width:100%">

与此相反：

<table width="400px" style="margin-top: 50px; margin-left: 20px; color: #FFF">

---

它不会工作得很好，因为你仍然有足够的内容显示在100px…所以我建议你改变大小约250px。如果你真的希望它有100px，我建议你用不同的方式制作表格。

你需要做一些事情来让它工作

• 首先，外部div不是必需的，所以我们可以去掉它
• 其次，您需要在媒体查询中更改表的宽度。我使用了一个百分比值（用于响应），但如果需要，可以将其设置为像素值（当然低于480px）
• 第三，您需要在媒体查询中设置输入/文本区域的宽度。否则，它们将占用“大小”属性中指定的宽度，并导致出现水平滚动条

以下是我使用的媒体查询：

@media only screen and (max-width: 480px) {
    table {
        width:95%;
    }
    input[type=text], textarea {
        width:75%;
    }
}

演示：

@media only screen and (max-width: 480px) {
    table {
        width:95%;
    }
    input[type=text], textarea {
        width:75%;
    }
}