4

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

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

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

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

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

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

4

1 回答 1

6

这将是一种方法。请注意复选框上的 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>

于 2014-03-11T12:41:27.253 回答