带有网格布局的 CSS 和 PHP - 来自 mysql 的动态数据 - 为每组行创建标题

Question

我已经将从 mysql 返回的数据分组到 php 和 html 页面。我在下面的链接中展示了一个示例。在某些组（树）中会有 5 个子项（品种）。

https://phpsandbox.io/e/x/ccgbr?layout=EditorPreview&defaultPath=%2F&theme=dark&showExplorer=no&openedFiles=1

在与@AHaworth 的 cmet 之后更新了链接

https://phpsandbox.io/n/still-glade-omzr-mksqw

对于其他树木，只有一两个品种。 该链接指向一个工作示例；但我觉得控制组显示的条件语句是一种解决方法。有没有更好的方法来使用 CSS 网格的力量来根据这张图片定位和格式化它：

我认为问题之一（或解决方案的一部分！）可能是根据子项（品种）的数量来更改 css 类。这可能通过生成这样的类名来实现：

<?php '<div class= "variety_row_' . $variety_row_count . '">' ?>

可能输出<div class= "variety_row_5"> 品种的最大数量可能是 10，所以这是可行的。

Answer 1

在我看来，这就像真正的表格数据，所以为什么不将其布置为表格，每行两个单元格。

例如：

.trees td:first-child {
  background-color: #eeeeee;
}

.trees td:nth-child(2) {
  color: red;
}

<table class="trees">
  <tr class="tree">
    <td>Apple</td>
    <td>
      <div>Cox</div>
      <div>Crab</div>
      <div>Cooker</div>
      <div>Discovery</div>
    </td>
  </tr>
  <tr>
    <td>Birch</td>
    <td>
      <div>Downy</div>
      <div>Silver</div>
    </td>
  </tr>
</table>

显然，您需要对这两种单元格类型进行更多格式化。

更新：我们现在有更多关于内容的信息，其中包含更多列。这个 sn-p 获取给定的代码，将其转换为表格格式，并将正确的行跨度属性放入类类型的单元格中。 [你可以用 PHP 而不是类来做到这一点]。

所做的另一项更改是将 font-size 设置为 min(14px, 1.5vmin) 以确保文本有机会在狭窄的视口上可读。

* {
  box-sizing: border-box;
  font-family: Verdana;
  font-size: max(14px, 1.5vw);
}

table {
  position: relative;
  width: 100vw;
}

td {
  padding: 5px;
}

.activity {
  color: red;
}

.type {
  color: green;
}

.number {
  color: red;
  text-align: right;
}

.date {
  color: purple;
}

.id {
  color: #8c8c8c;
  /*grey*/
}

.description_short {
  color: blue;
}

.success {
  color: white;
  background-color: #0E6A00;
  opacity: 0.9;
  display: inline;
  padding: 5px 5px 5px 5px;
}

.error {
  color: white;
  background-color: #B95B5B;
  opacity: 0.9;
  display: inline;
  padding: 5px 5px 5px 5px;
}

.textarea {
  vertical-align: top;
}

<table>
  <tr class="sub_wrapper">
    <td class="type" rowspan="4">
      Apple </td>

    <td class="description_short">
      Crab ~ sharp </td>
    <td class="number">
      75 </td>
    <td class="number">
      99 </td>
    <td class="date">
      2021-2-2 </td>
    <td class="description_short">
      three trees left - dangerous for livestock </td>
  </tr>
  <tr class="sub_wrapper">
    <td class="description_short">
      Cooker ~ tart </td>
    <td class="number">
      50 </td>
    <td class="number">
      99 </td>
    <td class="date">
      2021-2-2 </td>
    <td class="description_short">
      three trees left - dangerous for livestock </td>
  </tr>

  <tr class="sub_wrapper">
    <td class="description_short">
      Discovery ~ cruchy ~ delicious </td>
    <td class="number">
      25 </td>
    <td class="number">
      99 </td>
    <td class="date">
      2021-2-2 </td>
    <td class="description_short">
      three trees left - dangerous for livestock </td>
  </tr>
  <tr class="sub_wrapper">
    <td class="description_short">
      Cox ~ sweet </td>
    <td class="number">
      50 </td>
    <td class="number">
      99 </td>
    <td class="date">
      2021-2-2 </td>
    <td class="description_short">
      three trees left - dangerous for livestock </td>
  </tr>
  <tr class="sub_wrapper">
    <td class="type" rowspan="2">
      Birch </td>
    <td class="description_short">
      Silver ~ North_America </td>
    <td class="number">
      2 </td>
    <td class="number">
      99 </td>
    <td class="date">
      2021-2-2 </td>
    <td class="description_short">
      three trees left - dangerous for livestock </td>
  </tr>
  <tr class="sub_wrapper">
    <td class="description_short">
      Downy ~ As described </td>
    <td class="number">
      4 </td>
    <td class="number">
      99 </td>
    <td class="date">
      2021-2-2 </td>
    <td class="description_short">
      three trees left - dangerous for livestock </td>
  </tr>
  <tr class="sub_wrapper">
    <td class="type">
      Cedar </td>
    <td class="description_short">
      Cedar ~ Beautiful Smell </td>
    <td class="number">
      20 </td>
    <td class="number">
      99 </td>
    <td class="date">
      2021-2-2 </td>
    <td class="description_short">
      three trees left - dangerous for livestock </td>
  </tr>
  <tr class="sub_wrapper">
    <td class="type" rowspan="2">
      Beech </td>
    <td class="description_short">
      Common ~ Escarpment specialist </td>
    <td class="number">
      123 </td>
    <td class="number">
      99 </td>
    <td class="date">
      2021-2-2 </td>
    <td class="description_short">
      three trees left - dangerous for livestock </td>
  </tr>
  <tr class="sub_wrapper">
    <td class="description_short">
      Copper ~ Landmark </td>
    <td class="number">
      10 </td>
    <td class="number">
      99 </td>
    <td class="date">
      2021-2-2 </td>
    <td class="description_short">
      three trees left - dangerous for livestock </td>
  </tr>
</table>