在表格中呈现多个单选按钮可以通过以下几种方式实现:
<table>
<tr>
<td><input type="radio" name="option1"></td>
<td><input type="radio" name="option2"></td>
<td><input type="radio" name="option3"></td>
</tr>
<tr>
<td><input type="radio" name="option1"></td>
<td><input type="radio" name="option2"></td>
<td><input type="radio" name="option3"></td>
</tr>
</table>
<table>
<tr>
<td><label for="option1"><input type="radio" id="option1" name="option"></label></td>
<td><label for="option2"><input type="radio" id="option2" name="option"></label></td>
<td><label for="option3"><input type="radio" id="option3" name="option"></label></td>
</tr>
<tr>
<td><label for="option1"><input type="radio" id="option1" name="option"></label></td>
<td><label for="option2"><input type="radio" id="option2" name="option"></label></td>
<td><label for="option3"><input type="radio" id="option3" name="option"></label></td>
</tr>
</table>
<style>
.custom-radio input[type="radio"] {
display: none;
}
.custom-radio label {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
.custom-radio input[type="radio"]:checked + label {
background-color: #ccc;
}
</style>
<table>
<tr>
<td class="custom-radio"><input type="radio" id="option1" name="option"><label for="option1">Option 1</label></td>
<td class="custom-radio"><input type="radio" id="option2" name="option"><label for="option2">Option 2</label></td>
<td class="custom-radio"><input type="radio" id="option3" name="option"><label for="option3">Option 3</label></td>
</tr>
<tr>
<td class="custom-radio"><input type="radio" id="option1" name="option"><label for="option1">Option 1</label></td>
<td class="custom-radio"><input type="radio" id="option2" name="option"><label for="option2">Option 2</label></td>
<td class="custom-radio"><input type="radio" id="option3" name="option"><label for="option3">Option 3</label></td>
</tr>
</table>
以上是在表格中呈现多个单选按钮的几种常见方法。具体选择哪种方法取决于需求和设计风格。腾讯云提供的相关产品和产品介绍链接地址请参考腾讯云官方网站。
领取专属 10元无门槛券
手把手带您无忧上云