Using  element instead of  to get clickable rows I want to create clickable rows in an html table. Each row should be a link leading to a different page. I can of course add onclick handler, but that will create kind of a crappy UI - poor accessibility, no keyboard navigation, no right/middle click...
I found a better way to do it. Instead of using normal table element, force divs to act as different table tags through css display rules. And for rows, use a-s, with appropriate href attribute.
Here's what I mean:


    
  .table {
    display: table;
    border-collapse: collapse;
    font-family: sans-serif;
    width: 100%;
  }
  .thead {
    display: table-header-group;
  }
  .tbody {
    display: table-row-group;
  }
  .td, .th {
    display: table-cell;
    padding: 5px 10px;
    text-align: center;
  }
  .tr {
    display: table-row;
  }
  .thead &gt; .tr {
    background: #ccc;
    color: #555;
  }
  a.tr {
    text-decoration: none;
    color: black;
  }
  a.tr:hover {
    background: #eee;
    cursor: pointer;
  }
  &lt;div class="table"&gt;
    &lt;div class="thead"&gt;
      &lt;div class="tr"&gt;
        &lt;div class="th"&gt;ID&lt;/div&gt;
        &lt;div class="th"&gt;Name&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="tbody"&gt;
      &lt;a class="tr" href="#"&gt;
        &lt;div class="td"&gt;524&lt;/div&gt;
        &lt;div class="td"&gt;John Smith&lt;/div&gt;
      &lt;/a&gt;
      &lt;a class="tr" href="#"&gt;
        &lt;div class="td"&gt;331&lt;/div&gt;
        &lt;div class="td"&gt;Miles Corner&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;



Note how rows are clickable, you can tab through them and there is a nice tooltip showing link you will go to. Much better than onclick.
If I use a framework like React, I don't even have to replace all elements with div-s. I can just add &lt;a&gt; tags instead of &lt;tr&gt;s and it will work.
My question is, what's the catch? What am I missing? Is there some accessibility, browser compatibility, or other reason not to do this?
If it's a table, make it a &lt;table&gt;. Write a traditional &lt;tbody&gt; containing &lt;tr&gt;, in turn containing &lt;td&gt;, in turn containing individual &lt;a&gt;. Then the text will be links. This is simpler, doesn't require any fancy CSS, and better communicates your intent to browsers.
All of the usual keyboard and mouse functionality will be preserved.