单选按钮的 HTML 表。使单选按钮可单击单元格中的任何位置
Posted
技术标签:
【中文标题】单选按钮的 HTML 表。使单选按钮可单击单元格中的任何位置【英文标题】：Html Table of radio buttons. Make Radio button clickable anywhere in cell 【发布时间】：2021-05-09 20:45:08 【问题描述】：我想让单选按钮占据它们所在的整个单元格，而不影响表格或单元格的大小。 （更容易点击） 我不需要它们具有任何字符串值，只需按钮位置和样式就是我所追求的。 我一直在使用 css 进行测试，这将使它成为正方形，但它总是使单选按钮与单元格重叠或使表格改变形状。 如何自定义这些单选按钮？
非常感谢任何帮助或建议。我对此很陌生，并且已经不知所措。
.st
border: 1px solid #ddd;
border-collapse: separate;
border-spacing: 2px;
padding: 0px;
.st-header_corner
font-weight: bold;
padding: 0px 2px;
background: none;
border: 1px solid #ddd;
border-bottom: 1px solid #1c1b1b;
border-right: 1px solid #1c1b1b;
.st-header_row
font-weight: bold;
padding: 0px 2px;
background: lighten(#ddd, 10%);
border: 1px solid #ddd;
border-right: 1px solid #1c1b1b;
.st-header_col
font-weight: bold;
padding: 0px 2px;
background: lighten(#ddd, 10%);
border: 1px solid #ddd;
border-bottom: 1px solid #1c1b1b;
.st-cell_basic
border: 1px solid #ddd;
background: #ffffff;
.st-cell_plus
border: 1px solid darken(#ddd, 10%);
background: #ddd;
.st-Radio:not([disabled])
cursor: pointer;
opacity: 1;
.st-Radio:not([disabled]):hover
box-shadow: 0px 0px 4px green;
outline: 4px solid green;
.st-Radio:not([disabled]):checked+span
display: inline-block;
border-radius: 4px;
background: green;
padding: 0px;
width: 25px;
height: 25px;
<table class="st">
<thead>
<tr>
<th class="st-header_corner"> / </th>
<th class="st-header_col">30</th>
<th class="st-header_col">31</th>
<th class="st-header_col">32</th>
<th class="st-header_col">33</th>
<th class="st-header_col">34</th>
<th class="st-header_col">35</th>
<th class="st-header_col">36</th>
<th class="st-header_col">38</th>
<th class="st-header_col">40</th>
<th class="st-header_col">42</th>
<th class="st-header_col">44</th>
<th class="st-header_col">46</th>
<th class="st-header_col">48</th>
<th class="st-header_col">50</th>
</tr>
</thead>
<tbody>
<tr>
<td class="st-header_row">30</td>
<td class="st-cell_basic"><label><input id="3030" class="st-Radio" type="radio" name="size" value="3030" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3130" class="st-Radio" type="radio" name="size" value="3130" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3230" class="st-Radio" type="radio" name="size" value="3230" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3330" class="st-Radio" type="radio" name="size" value="3330" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3430" class="st-Radio" type="radio" name="size" value="3430" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3530" class="st-Radio" type="radio" name="size" value="3530" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3630" class="st-Radio" type="radio" name="size" value="3630" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3830" class="st-Radio" type="radio" name="size" value="3830" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4030" class="st-Radio" type="radio" name="size" value="4030" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4230" class="st-Radio" type="radio" name="size" value="4230" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4430" class="st-Radio" type="radio" name="size" value="4430" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4630" class="st-Radio" type="radio" name="size" value="4630" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4830" class="st-Radio" type="radio" name="size" value="4830" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="5030" class="st-Radio" type="radio" name="size" value="5030" data-option-position="2"><span></span></label></td>
</tr>
<tr>
<td class="st-header_row">32</td>
<td class="st-cell_basic"><label><input id="3032" class="st-Radio" type="radio" name="size" value="3032" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3132" class="st-Radio" type="radio" name="size" value="3132" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3232" class="st-Radio" type="radio" name="size" value="3232" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3332" class="st-Radio" type="radio" name="size" value="3332" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3432" class="st-Radio" type="radio" name="size" value="3432" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3532" class="st-Radio" type="radio" name="size" value="3532" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3632" class="st-Radio" type="radio" name="size" value="3632" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3832" class="st-Radio" type="radio" name="size" value="3832" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4032" class="st-Radio" type="radio" name="size" value="4032" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4232" class="st-Radio" type="radio" name="size" value="4232" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4432" class="st-Radio" type="radio" name="size" value="4432" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4632" class="st-Radio" type="radio" name="size" value="4632" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4832" class="st-Radio" type="radio" name="size" value="4832" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="5032" class="st-Radio" type="radio" name="size" value="5032" data-option-position="2"><span></span></label></td>
</tr>
<tr>
<td class="st-header_row">34</td>
<td class="st-cell_basic"><label><input id="3034" class="st-Radio" type="radio" name="size" value="3034" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3134" class="st-Radio" type="radio" name="size" value="3134" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3234" class="st-Radio" type="radio" name="size" value="3234" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3334" class="st-Radio" type="radio" name="size" value="3334" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3434" class="st-Radio" type="radio" name="size" value="3434" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3534" class="st-Radio" type="radio" name="size" value="3534" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3634" class="st-Radio" type="radio" name="size" value="3634" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3834" class="st-Radio" type="radio" name="size" value="3834" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4034" class="st-Radio" type="radio" name="size" value="4034" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4234" class="st-Radio" type="radio" name="size" value="4234" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4434" class="st-Radio" type="radio" name="size" value="4434" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4634" class="st-Radio" type="radio" name="size" value="4634" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4834" class="st-Radio" type="radio" name="size" value="4834" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="5034" class="st-Radio" type="radio" name="size" value="5034" disabled data-option-position="2"><span></span></label></td>
</tr>
<tr>
<td class="st-header_row">36</td>
<td class="st-cell_basic"><label><input id="3036" class="st-Radio" type="radio" name="size" value="3036" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3136" class="st-Radio" type="radio" name="size" value="3136" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3236" class="st-Radio" type="radio" name="size" value="3236" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3336" class="st-Radio" type="radio" name="size" value="3336" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3436" class="st-Radio" type="radio" name="size" value="3436" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3536" class="st-Radio" type="radio" name="size" value="3536" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3636" class="st-Radio" type="radio" name="size" value="3636" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3836" class="st-Radio" type="radio" name="size" value="3836" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4036" class="st-Radio" type="radio" name="size" value="4036" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4236" class="st-Radio" type="radio" name="size" value="4236" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4436" class="st-Radio" type="radio" name="size" value="4436" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4636" class="st-Radio" type="radio" name="size" value="4636" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4836" class="st-Radio" type="radio" name="size" value="4836" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="5036" class="st-Radio" type="radio" name="size" value="5036" disabled data-option-position="2"><span></span></label></td>
</tr>
</tbody>
</table>【问题讨论】：
我无法理解问题所在或您想要达到的目标。 “使单选按钮样式与它们所在的表格对齐”是什么意思？ 我想我明白了。绿色方块不在带边框的网格框中居中。如果将示例简化和放大，将会有所帮助。 感谢您的回复。抱歉，我更新了我的措辞。单选按钮（形状像表格单元格内的正方形），我可以将边缘与单元格完美对齐或接近完美吗？ div 单元格本身似乎不想保持完美的正方形。 （编辑：我猜它不是真正的单元格，但我使用的是“html table”并切换到 div 布局，它似乎更好地配合。） 更新：新代码和更好的描述。 将每个收音机包裹在label 元素中，并使用 CSS 使 labels 占据表格单元格的 100%（或其他）。
【参考方案1】：
修改代码以设置单选按钮的样式。其中很多与 :before 元素有关。我仍然想知道如何将这些无线电盒子中的每一个带到其单元格的边缘。
.st
border-collapse: seperate;
border-spacing: 0.0625em;
padding: 0 auto;
user-select: none;
.st-headerC
background: none;
.st-headerH,
.st-headerV
font-size: 18px;
font-weight: normal;
color: white;
background: black;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 1px 1px 2px white;
padding: 0.125em 0.125em;
width: 1.25em;
height: 1.25em;
.st-cell_basic
border: 1px solid black;
background: white;
margin: 0;
.st-cell_plus
border: 1px solid black;
background: lightgray;
margin: 0;
input[type="radio"].st-Radio
-webkit-appearance: none;
width: 1.25em;
height: 1.25em;
border: 1px solid darkgray;
border-radius: 0%;
outline: none;
padding: 0px;
box-shadow: 0 0 5px 0px gray inset;
cursor: pointer;
input[type="radio"].st-Radio:hover
box-shadow: 0 0 5px 0px orange inset;
input[type="radio"].st-Radio:before
content: "";
display: block;
width: 100%;
height: 100%;
margin: 20% auto;
border-radius: 0%;
margin-top: 0px;
input[type="radio"].st-Radio:checked:before
background: lightgreen;
box-shadow: lime 0px 0px 3px 1px;
<table class="st">
<thead>
<tr>
<th class="st-headerC"> </th>
<th class="st-headerH">30</th>
<th class="st-headerH">31</th>
<th class="st-headerH">32</th>
<th class="st-headerH">33</th>
<th class="st-headerH">34</th>
<th class="st-headerH">35</th>
<th class="st-headerH">36</th>
<th class="st-headerH">38</th>
<th class="st-headerH">40</th>
<th class="st-headerH">42</th>
<th class="st-headerH">44</th>
<th class="st-headerH">46</th>
<th class="st-headerH">48</th>
<th class="st-headerH">50</th>
</tr>
</thead>
<tbody>
<tr>
<th class="st-headerV">30</th>
<td class="st-cell_basic"><label><input id="3030" class="st-Radio" type="radio" name="size" value="3030" data-option-position="2"><label for="3030"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3130" class="st-Radio" type="radio" name="size" value="3130" data-option-position="2"><label for="3130"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3230" class="st-Radio" type="radio" name="size" value="3230" data-option-position="2"><label for="3230"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3330" class="st-Radio" type="radio" name="size" value="3330" data-option-position="2"><label for="3330"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3430" class="st-Radio" type="radio" name="size" value="3430" data-option-position="2"><label for="3430"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3530" class="st-Radio" type="radio" name="size" value="3530" data-option-position="2"><label for="3530"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3630" class="st-Radio" type="radio" name="size" value="3630" data-option-position="2"><label for="3630"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3830" class="st-Radio" type="radio" name="size" value="3830" data-option-position="2"><label for="3830"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4030" class="st-Radio" type="radio" name="size" value="4030" data-option-position="2"><label for="4030"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4230" class="st-Radio" type="radio" name="size" value="4230" data-option-position="2"><label for="4230"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4430" class="st-Radio" type="radio" name="size" value="4430" data-option-position="2"><label for="4430"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="4630" class="st-Radio" type="radio" name="size" value="4630" data-option-position="2"><label for="4630"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="4830" class="st-Radio" type="radio" name="size" value="4830" data-option-position="2"><label for="4830"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="5030" class="st-Radio" type="radio" name="size" value="5030" data-option-position="2"><label for="5030"><span></span></label></label></td>
</tr>
<tr>
<th class="st-headerV">32</th>
<td class="st-cell_basic"><label><input id="3032" class="st-Radio" type="radio" name="size" value="3032" data-option-position="2"><label for="3032"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3132" class="st-Radio" type="radio" name="size" value="3132" data-option-position="2"><label for="3132"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3232" class="st-Radio" type="radio" name="size" value="3232" data-option-position="2"><label for="3232"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3332" class="st-Radio" type="radio" name="size" value="3332" data-option-position="2"><label for="3332"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3432" class="st-Radio" type="radio" name="size" value="3432" data-option-position="2"><label for="3432"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3532" class="st-Radio" type="radio" name="size" value="3532" data-option-position="2"><label for="3532"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3632" class="st-Radio" type="radio" name="size" value="3632" data-option-position="2"><label for="3632"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3832" class="st-Radio" type="radio" name="size" value="3832" data-option-position="2"><label for="3832"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4032" class="st-Radio" type="radio" name="size" value="4032" data-option-position="2"><label for="4032"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4232" class="st-Radio" type="radio" name="size" value="4232" data-option-position="2"><label for="4232"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4432" class="st-Radio" type="radio" name="size" value="4432" data-option-position="2"><label for="4432"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="4632" class="st-Radio" type="radio" name="size" value="4632" data-option-position="2"><label for="4632"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="4832" class="st-Radio" type="radio" name="size" value="4832" data-option-position="2"><label for="4832"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="5032" class="st-Radio" type="radio" name="size" value="5032" data-option-position="2"><label for="5032"><span></span></label></label></td>
</tr>
<tr>
<th class="st-headerV">34</th>
<td class="st-cell_basic"><label><input id="3034" class="st-Radio" type="radio" name="size" value="3034" data-option-position="2"><label for="3034"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3134" class="st-Radio" type="radio" name="size" value="3134" data-option-position="2"><label for="3134"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3234" class="st-Radio" type="radio" name="size" value="3234" data-option-position="2"><label for="3234"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3334" class="st-Radio" type="radio" name="size" value="3334" data-option-position="2"><label for="3334"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3434" class="st-Radio" type="radio" name="size" value="3434" data-option-position="2"><label for="3434"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3534" class="st-Radio" type="radio" name="size" value="3534" data-option-position="2"><label for="3534"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3634" class="st-Radio" type="radio" name="size" value="3634" data-option-position="2"><label for="3634"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3834" class="st-Radio" type="radio" name="size" value="3834" data-option-position="2"><label for="3834"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4034" class="st-Radio" type="radio" name="size" value="4034" data-option-position="2"><label for="4034"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4234" class="st-Radio" type="radio" name="size" value="4234" data-option-position="2"><label for="4234"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4434" class="st-Radio" type="radio" name="size" value="4434" data-option-position="2"><label for="4434"><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
</tr>
<tr>
<th class="st-headerV">36</th>
<td class="st-cell_basic"><label><label><span></span></label></label></td>
<td class="st-cell_basic"><label><label><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3236" class="st-Radio" type="radio" name="size" value="3236" data-option-position="2"><label for="3236"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3336" class="st-Radio" type="radio" name="size" value="3336" data-option-position="2"><label for="3336"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3436" class="st-Radio" type="radio" name="size" value="3436" data-option-position="2"><label for="3436"><span></span></label></label></td>
<td class="st-cell_basic"><label><label><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3636" class="st-Radio" type="radio" name="size" value="3636" data-option-position="2"><label for="3636"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3836" class="st-Radio" type="radio" name="size" value="3836" data-option-position="2"><label for="3836"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4036" class="st-Radio" type="radio" name="size" value="4036" data-option-position="2"><label for="4036"><span></span></label></label></td>
<td class="st-cell_basic"><label><label><span></span></label></label></td>
<td class="st-cell_basic"><label><label><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
</tr>
</tbody>
</table>【讨论】：
以上是关于单选按钮的 HTML 表。使单选按钮可单击单元格中的任何位置的主要内容，如果未能解决你的问题，请参考以下文章