Обтекание строки таблицы в элементе (гиперссылка) в HTML5

Question

Я пытаюсь обернуть строку таблицы в элемент «a» (гиперссылка), чтобы сделать всю строку кликабельной. Я использую doctype HTML5, который должен допускать подобные вещи, и на самом деле у меня не было проблем с оборачиванием других элементов уровня блока в ссылках. На самом деле, кажется, что оборачивание элемента вокруг всей таблицы работает.

Разметка следующим образом:

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

Answer 1

Из спецификации HTML5 :

Контексты, в которых может использоваться элемент tr:

• Как дочерний элемент элемента thead.
• Как дочерний элемент элемента tbody.
• Как дочерний элемент элемента tfoot.
• Как дочерний элемент элемента таблицы после любого элемента caption, colgroup и thead,но только если нет элементов tbody, которые являются дочерними элементами элемента таблицы.

Это означает, что вы не можете наследовать tr в элементе a.В вашем случае я бы пошел с 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