Propagation bouton radio à l'intérieur d'une cellule de tableau

J'ai besoin d'avoir le tableau avec deux colonnes. Chaque ligne est un bouton radio de la paire.

Par exemple: Il y est question et deux réponses possibles oui/non.

+------+------+
| yes  | no   | - 1.question
| yes  | no   | - 2.question
| yes  | no   | - 3.question
| yes  | no   | - 4.question
| yes  | no   | - 5.question
+------+------+

Le problème est que j'ai besoin de répandre le bouton radio à l'ensemble de la cellule. Si quelqu'un veut sélectionner choix, il n'est pas à l'aise pour cibler uniquement sur le texte... Comment faire 

<table>
  <tr>
    <td>
      <input type="radio" name="first">yes</radio>
    </td>
    <td>
      <input type="radio" name="first">no</radio>
    </td>
    <td>
      1.Question
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="second">yes</radio>
    </td>
    <td>
      <input type="radio" name="second">no</radio>
    </td>
    <td>
      2.Question
    </td>
  </tr>...
</table>
  • Merci de nous montrer le code HTML, pas juste un tirage au sort...
InformationsquelleAutor MakoBuk | 2014-10-15
  1. 6

    Un problème avec votre code HTML: vous ne spécifiez pas le name de l'attribut de l'entrée des éléments. N'oubliez pas que si vous faites cela, aucune donnée ne sera envoyé car il est tout simplement aucun identificateur de fragment pour les données du formulaire.

    OP semble avoir résolu le problème du manque name attribut.

    Utilisation <label for="..."> pour cibler chaque bouton radio par id au sein de la cellule de tableau, et un élément de niveau bloc tel qu'il se remplit tout l'espace dans la cellule. Exemple de syntaxe:

    CSS:

    label {
    cursor: pointer;
    display: block;
    text-align: center;
}

    HTML:

    <table>
  <tr>
    <td><label for="q1-y"><input type="radio" name="q1" id="q1-y" value="yes" />Yes</label></td>
    <td><label for="q1-n"><input type="radio" name="q1" id="q1-n" value="no" />No</label></td>
    <td>Question 1</td>
  </tr>
</table>

    Voir la preuve-de-concept de démo ici: http://jsfiddle.net/teddyrised/zrjy29bw/

    InformationsquelleAutor Terry