Comment redimensionner un formulaire/table à l'aide de requêtes de média

Voici mon code:

<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>

Et je veux faire de la table et toutes ses fonctionnalités les plus petits, vus ci-dessous 480px large pour les petits appareils mobiles/etc. Je ne sais pas quoi référence lors de l'utilisation d'une requête de média:

@media only screen and (max-width: 480px) {
#table {
width: 100px;
}

Cette css ci-dessus ne fonctionne pas, il redimensionne la div mais le contenu est toujours d'origine taille, même si j'ai mis le formulaire dans la div cela ne fonctionne toujours pas, peut-être le div n'est pas nécessaire de toute façon... toute aide serait de recevoir des principaux bravo!!

Merci!

double possible de Responsive Design - tables large

OriginalL'auteur Ash Darko | 2013-08-13

  1. 6

    Vous avez besoin de faire quelques choses pour faire ce travail.

    • Tout d'abord, que la div extérieure n'est pas nécessaire, de sorte que nous pouvons nous débarrasser de lui.
    • Deuxièmement, vous avez besoin de changer la largeur de votre table dans la requête de média. J'ai utilisé un pourcentage de la valeur (pour la réactivité) mais vous pouvez le régler à une valeur de pixel si vous le désirez (en vertu de 480px bien sûr)
    • Tiers, vous devez définir une largeur dans votre media query pour les entrées/textarea. Sans cela, ils prendront la largeur spécifiée dans la 'taille' de l'attribut et sera la cause de la barre de défilement horizontale apparaît.

    Voici la requête de support que j'ai utilisé:

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

    Démo: http://jsfiddle.net/hABGX/2/

    Vous avez été génial 🙂 merci beaucoup 🙂
    Pas de travail, même dans le lien que vous avez posté.

    OriginalL'auteur Joe_G

  2. 3

    il ne fonctionne pas parce que votre table a un style, et que le style est syaing la table a une largeur de 400px. Essayez de mettre ce:

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

    au lieu de cela:

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

    il l'habitude de travailler très bien parce que vous avez encore assez de contenu à afficher dans 100px...alors je vous recommandons de changer la taille à environ 250 px. Si vous voulez vraiment avoir 100px je vous conseille de vous rendre à la table d'une différente façon.

    Vous avez été génial 🙂 merci beaucoup 🙂

    OriginalL'auteur Tiago