带网格的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>