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

Answer 2

您可能想使用

grid-template-columns

属性来设置列数，但是，您还应该更新 HTML 结构以使其工作：

div {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

这是更新的小提琴：https://jsfiddle.net/dk9epf57/9/

div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  
}

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

你有几个答案，这个是用例子来完成我之前的评论，以帮助你理清你想要的东西，并决定进一步深入研究网格教程，比如 https://css-tricks.com/snippets/css/complete -guide-grid/ 或类似资源 https://gridbyexample.com/

display:table

和

display:grid

可能看起来有点相似，但 not.

关于例子中使用的

max-content

，你也可以看到min-content和max-content是如何工作的？

div {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
}

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

table {
  border-collapse: collapse;
}

td {
  border: solid 2px red;
}

div.bc {
  background: red;
  border: red 1px solid;
  background: red;
  gap: 1px;
  width: max-content;
}

div.bc>* {
  background: white;
  border: none;
}

div.bnc {
  width: max-content;
  border: solid 1px red;
  gap: 2px;
  padding: 2px;
}
div.bnc p {
padding:0.5em;
}

<h3>CSS grid layout dispatching children into 3 columns</h3>
<b>border-collapse not avalaible;<b><br><br>
<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>HTML table-layout</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>
<br>
<hr>
<br>
<h3>CSS grid layout faking table-layout  </h3>
<b> table-layout and border-collapse faked through gap and background and width<b><br><br>
<div class="bc">
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
<!--</div>
<div>-->
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>
<br>
<hr>
<br>
<h3>CSS grid layout faking table-layout  </h3>
<b> table-layout without border-collapse faked width<b><br><br>
<div class="bnc">
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
<!--</div>
<div>-->
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>

Answer 4

您可以使用 Grid 轻松做到这一点，但首先让您的 HTML 更简单一些：

<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>

然后试试这个 CSS：

div {
  display: inline-grid;
  grid-template-columns: repeat(3, min-content);
  background: red;
  padding: 2px;
  gap: 2px;
}

p {
  background: white; 
  margin:0;
}

CodePen 演示