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

Question

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

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

对于其他树木，只有一两个品种。 该链接是一个工作示例； 但我觉得控制组显示的条件语句是一种解决方法。 有没有更好的方法来使用 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>

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