html - 将 label 标记用于具有多行表格单元格的表格中的多行

Question

我有一个带有复选框的表格，每个复选框行中的单元格包含有关该复选框的内容的信息。所以我想对行使用 label 但据我所知，你不能在 table 和 之间使用 label td 标签。

然后我制作了相同内容的 CSS 表格版本并且它工作正常。我将 label 设置为表格行，单元格正确对齐，单击它们将选中/取消选中复选框。

现在的问题是:我希望复选框跨越多行。

http://jsfiddle.net/odraencoded/YaS5v/ - HTML 表格版本具有 rowspan 属性，但我不能在单行中使用 label 更不用说多行了。

<table>
  <tr>
    <td rowspan=2><input type=checkbox /></td>
    <td>...</td>
  </tr>
  <tr><td>...</td></tr>
</table>

http://jsfiddle.net/odraencoded/EKzXv/ - CSS 表格版本允许我使用 label 但我找不到设置行跨度的方法。

<div style="display: table;">
  <label style="display: table-row-group;">
    <span style="display: table-row;">
      <span style="display: table-cell;">
        <input type="checkbox" />
      </span>
      <span...>...</span>
    </span>
    <span...><span...>...</span></span>
  </label>
</div>

有没有什么办法可以让标签标签包含多行？它包含的单元格之一是标签的输入复选框？那个输入复选框单元格应该跨越标签包含的所有行吗？无论如何？

Answer 1

这将是一种实现方式。请注意复选框上的 ID。

<table>
  <tbody id="checkbox1">
    <tr>
        <td rowspan="2"><input type="checkbox" id="check1" /></td>
        <td><label for="check1">A</label></td>
        <td><label for="check1">B</label></td>
        <td><label for="check1">C</label></td>
    </tr>
    <tr>
        <td><label for="check1">a</label></td>
        <td><label for="check1">b</label></td>
        <td><label for="check1">c</label></td>
    </tr>
    </tbody>
    <tbody id="checkbox2">
    <tr>
        <td rowspan="2"><input type="checkbox" id="check2" /></td>
        <td><label for="check2">D</label></td>
        <td><label for="check2">E</label></td>
        <td><label for="check2">F</label></td>
    </tr>
    <tr>
        <td><label for="check2">d</label></td>
        <td><label for="check2">e</label></td>
        <td><label for="check2">f</label></td>
    </tr>
  </tbody>
</table>