在表格单元格内分布单选按钮

Question

I need to have table with two columns. Each row is one radio button pair.

For example: There is question and two possible answers yes/no.

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

The problem is I need to spread radio button to whole cell. If someone wants to select choice it is not comfortable to target only on text... How to do that

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

Answer 1

One issue with your HTML: you did not specify the name attribute for the input elements. Remember that if you're doing this, no data will be sent because there is simply no fragment identifier for the form data.

OP seems to have fixed the issue for the missing name attribute.

---

Use <label for="..."> to target each radio button by id within the table cell, and set it to a block level element such that it fills up the entire space in the cell. Example markup:

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

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

See proof-of-concept demo here: http://jsfiddle.net/teddyrised/zrjy29bw/