在 HTML5 中将表格行包装在元素（超链接）中

Question

我试图将表格行包装在“a”元素（超链接）中，以使整行可单击。我正在使用 HTML5 文档类型，它应该允许这种事情，事实上我在链接中包装其他块级元素没有问题。事实上，将 a 元素包裹在整个表格周围似乎是可行的。

标记如下：

<table>
    <tbody>
      <a href="#">
          <tr>
              <td>25 Nov 2010</td>
              <td>Active</td>
          </tr>
      </a>
   </tbody>
</table> 

Answer 1

来自 HTML5 规范：

元素所在的上下文tr 可以用作：

• 作为 thead 元素的子元素。
• 作为 tbody 元素的子元素。
• 作为 tfoot 元素的子元素。
• 作为表元素的子元素，位于任何 title、colgroup 和 thead 元素之后，但前提是不存在作为表元素子元素的 tbody 元素。

这意味着您无法继承 a 元素中的 tr 。
在你的情况下，我会使用 Javascript onclick 代替。或者，您可以在每行 td 中放置相同的锚元素。

希望这有帮助。

Answer 2

为什么不使用 display: table-* CSS？它得到广泛支持并且相当无缝：

HTML：

<div class="table">
    <div class="tbody">
      <a href="#" class="tr">
          <div class="td">25 Nov 2010</div>
          <div class="td">Active</div>
      </a>
   </div>
</div> 

CSS：

.table { display: table; }
.tbody { display: table-row-group; }
.tr { display: table-row; }
.td { display: table-cell; }

参见 codepen

Answer 3

您可以将 tr 替换为 a 元素。只需将 a 设置为 display:table-row