Html 在表格单元格内展开单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26390079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Spread radio button inside table cell
提问by MakoBuk
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>
回答by Terry
One issue with your HTML: you did not specify the nameattribute for the input elements. Remember that if you're doing this, no data will be sentbecause there is simply no fragment identifier for the form data.
您的 HTML 存在一个问题：您没有name为 input 元素指定属性。请记住，如果您这样做，将不会发送任何数据，因为表单数据根本没有片段标识符。
OP seems to have fixed the issue for the missing nameattribute.
OP 似乎已经解决了缺少name属性的问题。
Use <label for="...">to target each radio button by idwithin 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 for="...">通过靶向每个单选按钮id的表格单元格内，并且将其设置为一个块级元素，使得其填充在单元中的整个空间。示例标记：
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/
在此处查看概念验证演示：http: //jsfiddle.net/teddyrised/zrjy29bw/
