使用CSS网格创建表 [英] Create a Table with CSS grid

问题描述

我正在尝试使用CSS网格创建一个表，并根据内容使用相等的列.我想避免使用<table>.这是此问题的后续措施:使用CSS网格自动调整列

I'm trying to create a table using CSS grid, with equal columns based on the content. I want to avoid using <table>. This is a follow-up to this question: Auto-adjusting columns with CSS grid

我要实现的目标:

此表有效: https://codepen.io/anon/pen/baExYw

但是我想将每行包装在div中，这毫不奇怪地破坏了表.

But I want to wrap the each row in a div, which unsurprisingly breaks the table.

此表已损坏: https://codepen.io/anon/pen/qpbMgG

app.html

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

app.css

.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: 20px;
  font-size: 150%;
}

我还是CSS Grid的新手，所以我仍然很难理解其中一半是如何在后台工作的.

I'm still very new to CSS Grid, so I'm still having trouble understanding how half of this stuff works behind the scenes.

感谢您的帮助.预先感谢.

Any help is appreciated. Thanks in advance.

推荐答案

display: contents is what you need.

contents

contents

这些元素本身不会产生特定的框.他们是 取而代之的是它们的伪框和子框.

These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.

添加此CSS(示例):

.row {
    display: contents;
}

更多链接:

• 为`display:contents ;;
• 浏览器支持表

• Get Ready for `display: contents;`
• Browser support table

这篇关于使用CSS网格创建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！