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

Posted 2023-03-05

【中文标题】对具有多行表格单元格的表格中的多行使用标签标记

【英文标题】：Using the label tag for multiple rows in a table with a multi-row table-cell

【发布时间】：2012-12-03 02:27:54

【问题描述】：

我有一个包含复选框的表格，每个复选框行中的单元格包含有关该复选框的信息。所以我想对行使用 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>

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

【问题讨论】：

呃。什么？你能改写你的问题吗？有没有想过使用<TH>？

使用 TH 无济于事。我不能将标签标签包含在表格标签中并包含多个 TR 标签，无论我使用 TD 还是 TH 都不会改变这一点。我想要的是一个包含多个表格行的标签标签，以及一个跨越这些多行的表格单元格，其中包含一个复选框。

您确定您完全了解<label> 的工作原理吗？你能做一个你想要的模型吗？我还在黑暗中。你不能有一个超越<TR> 的<TD>...这违背了表格的全部意义。你会想要完整的<DIV>。

jsfiddle.net/odraencoded/EKzXv

<label> 使用名为for 的属性。它将<label> 与所需的<input> Source 链接起来

【参考方案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>

【讨论】：

单个输入元素有多个标签是否会导致使用屏幕阅读器的人出现可访问性问题？还是有其他影响？

@pohart：我会留给你决定。