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 table seems to work.

Markup as follows:

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

回答1:

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.

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/4369206/wrapping-a-table-row-in-a-element-hyperlink-in-html5

标签

javascript

html

html5

html-table

anchor