Wrapping a table row in a element (hyperlink) in HTML5

I'm trying to wrap a table row in an "a" element (hyperlink) in order to make the whole row clickable. I'm using the HTML5 doctype, which should allow for this sort of thing and in fact I've had no problem wrapping other block-level elements in links. In fact, wrapping an a element around a whole tabl开发者_如何学编程e seems to work.

Markup as follows:

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

---

From the HTML5 spec:

Contexts in which element tr can be used:

• As a child of a thead element.
• As a child of a tbody element.
• As a child of a tfoot element.
• As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tbody elements that are children of the table element.

That means you cannot inherit tr in a element. In your case I would go with Javascript onclick instead. Alternatively, you can put the same anchor element in each of the rows tds.

Hope this helps.

---

Why not use display: table-* CSS? It's widely supported and is fairly seamless:

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

---

You can replace the tr with an a element. Just set the a to display:table-row