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

Question

我有一个包含复选框的表，每个复选框行中的单元格包含关于该复选框的信息。因此，我想对行使用label，但据我所知，您不能在表和td标记之间使用label。

然后，我制作了一个CSS表格版本的相同的东西，它正常工作。我将标签设计为表格行，单元格正确地对齐，单击它们将选中/取消选中复选框。

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

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表版本允许我使用标签，但我找不到设置行跨度的方法。

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

​