0 レビュー
1 回答
グリッドレイアウトを使用したCSSとPHP-mysqlからの動的データ-行の各グループの見出しを作成
mysqlから戻ってくるデータをphpおよびhtmlページにグループ化しました。以下のリンクに例を示しました。一部のグループ(ツリー)には、5つのサブアイテム(品種)があります。
https://phpsandbox.io/e/x/ccgbr?layout=EditorPreview&defaultPath=%2F&theme=dark&showExplorer=no&openedFiles= 1
@AHaworthとのコメント後のリンクを更新
https://phpsandbox.io/n/still-glade-omzr-mksqw
他の木の場合、1つまたは2つの品種しかありません。リンクは実際の例へのリンクです。しかし、グループの表示を制御する条件文は回避策だと思います。この画像のようにこれを配置およびフォーマットするためにCSSグリッドの力を使用するより良い方法はありますか?
問題の1つ(または解決策の一部!)は、サブアイテム(種類)の数に基づいてcssクラスを変更することかもしれないと思います。これは、次のようなクラス名を生成することで可能になる可能性があります。
<?php '<div class= "variety_row_' . $variety_row_count . '">' ?>
<div class= "variety_row_5">
出力する可能性があります。品種の最大数は10と言うことができるので、これは実行可能です。
わからない
0
レビュー
答え :
解決:
これは私には実際の表形式のデータのように見えるので、行ごとに2つのセルをテーブルとしてレイアウトしてみませんか。
例えば:
.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>
わからない
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。