带有网格的 HTML 表格的行为不像带有网格的 div？答案

【问题标题】：HTML table with grid doesn't behave like div with grid?带有网格的 HTML 表格的行为不像带有网格的 div？
【发布时间】：2019-06-19 06:28:34
【问题描述】：

为什么这不起作用？

.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>

【问题讨论】：

标签： css google-chrome firefox html-table css-grid

【解决方案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>

【讨论】：