带 CSS 网格的表格

Question

我的 CSS 网格表的列宽度不同，我想使用 CSS 网格复制表结构。

我之所以使用grid-auto-flow: column;，是因为在我的应用程序中，单元格是动态生成的，并且数量会有所不同。

显示问题的图像：

代码： https: //jsfiddle.net/w8sdvnr7/1/

div {
  display: grid;
  grid-auto-flow: column;
}

p {
  border: 1px solid red;
  margin: 0;
}

table {
  border-collapse: collapse;
}

td {
  border: solid 2px red;
}

<h3>Not working: CSS Grid: The cells in the rows have different size.</h3>
<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
</div>
<div>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>
<hr>
<br>
<hr>
<h3>What I want: CSS Table: The cells in the rows have same size.</h3>
<table>
  <tr>
    <td>ABC</td>
    <td>A</td>
    <td>ABCDEFGHIJKLMNOP</td>
  </tr>
  <tr>
    <td>ABCDEFGHIJKLMNOP</td>
    <td>A</td>
    <td>AB</td>
  </tr>
</table>

Answer 1

你的问题有解决方案

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto);
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}
.row {
    display: contents;
}

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of dataa really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>