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

【问题标题】：Wrapping a table row in a element (hyperlink) in HTML5在 HTML5 中将表格行包装在元素（超链接）中
【发布时间】：2018-08-10 22:57:09
【问题描述】：

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

标记如下：

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

【问题讨论】：

Wrapping HTML table rows in <a> tags的可能重复

标签： javascript html html-table anchor

【解决方案1】：

来自HTML5 spec：

元素tr可以使用的上下文：

作为thead 元素的子元素。
作为 tbody 元素的子元素。
作为 tfoot 元素的子元素。
作为 table 元素的子元素，在任何 caption、colgroup 和 thead 元素之后，但前提是没有 tbody 元素是 table 元素的子元素。

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

希望这会有所帮助。

【讨论】：

啊，非常感谢！可悲的是，在超链接中包装似乎也不起作用（同样，这不是最整洁的解决方案）。回到 jQuery 似乎是这样！
我没有说包裹td，而是在td 内放置一个锚点并调整大小以覆盖整个空间。 <td><a href="#" >Content of td</a></td>

【解决方案2】：

为什么不使用display: table-* CSS？它是widely supported，相当无缝：

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

See codepen

【讨论】：

【解决方案3】：

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

【讨论】：