HTML таблица с сеткой не ведет себя как div с сеткой?

Question

Почему это не работает?

.grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-gap: 3px;
  grid-template-columns: 3fr 1fr;
}
.grid .box {
  display: contents;
}
.grid .item {
  background-color: gold;
}


code {
 background: rgba(0,0,0,0.1);
 display: inline-block;
 padding: 2px 5px;
}

<h4>This <code>&lt;table&gt;</code> doesn't behave correctly (Chrome and Firefox support <code>display: contents</code>)</h4>
<table class="grid">
  <tr class="box">
    <td class="item">A</td>
    <td class="item">B</td>
  </tr>
  <tr class="box">
    <td class="one item">A</td>
    <td class="two item">B</td>
  </tr>
</table>


<h4>This is how it should look like (no <code>&lt;table&gt;</code>)</h4>
<div class="grid">
  <div class="box">
    <div class="item">A</div>
    <div class="item">B</div>
  </div>
  <div class="box">
    <div class="item">A</div>
    <div class="item">B</div>
  </div>
</div>

Answer 1

Потому что внутри таблицы у вас есть tbody, сгенерированный браузером. Добавьте display:contents, чтобы пройти через него, и он будет работать так, как ожидалось:

.grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-gap: 3px;
  grid-template-columns: 3fr 1fr;
}
.grid .box {
  display: contents;
}
.grid .item {
  background-color: gold;
}
tbody {
 display:contents
}


code {
 background: rgba(0,0,0,0.1);
 display: inline-block;
 padding: 2px 5px;
}

<h4>This <code>&lt;table&gt;</code> doesn't behave correctly (Chrome and Firefox support <code>display: contents</code>)</h4>
<table class="grid">
  <tr class="box">
    <td class="item">A</td>
    <td class="item">B</td>
  </tr>
  <tr class="box">
    <td class="one item">A</td>
    <td class="two item">B</td>
  </tr>
</table>


<h4>This is how it should look like (no <code>&lt;table&gt;</code>)</h4>
<div class="grid">
  <div class="box">
    <div class="item">A</div>
    <div class="item">B</div>
  </div>
  <div class="box">
    <div class="item">A</div>
    <div class="item">B</div>
  </div>
</div>