对具有多行表格单元格的表中的多行使用label标签

Question

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

然后我制作了同样的CSS-table版本,它运行正常.我将标签设置为表格行,单元格正确对齐,单击它们将选中/取消选中复选框.

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

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

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

http://jsfiddle.net/odraencoded/EKzXv/ - CSS表版本让我使用标签,但我找不到设置rowspan的方法.

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