Ausgabe in einem grid

rernanded

Erfahrenes Mitglied
Hallo, ich versuche Ausgaben per php in einem grid mit drei Spalten. Das funktioniert auch ganz okay. Auffallend ist nur, dass horizontal zwischen der Ausgabe in der linken und mittleren Spalte der Abstand kleiner ist als in der Ausgabe zwischen der mittleren und rechten Spalte.
Frage: Gibt es dafür eine Ursache in meinem Code?
Frage: Kann ich das Ganze auch anders und ev. besser lösen als mit num_cols?
MONI


PHP:
<!DOCTYPE html>
<html>

<head>

<style>
.tables {
width:  100%;

}

.trs {

}

.tds {
font-family: arial;
font-size: 20px;
text-align: center;
width: 30%;
background-color: yellow;
border-top: 0px solid #FFF;
border-bottom: 30px solid #FFF;
border-left: 0px solid #FFF;
border-right: 0px solid #FFF;
}

</style>

</head>

<body>

<?php
$servername = "localhost:3306";
$username = "";
$password = "";
$dbname = "";

$connection = new mysqli($servername, $username, $password, $dbname);

if ($connection->connect_error) {
     die("Connection failed: " . $connection->connect_error);
}

$sql = "SELECT * FROM datenbank ORDER BY RAND() LIMIT 0,100";

$result = $connection->query($sql);

$total_records = $result->num_rows; // the number of records
while($row = $result->fetch_array()) { // store all records
    $datarows[] = $row;
}

$num_cols = 3; // the number of columns
$num_rows = ceil($total_records / $num_cols); // the number of rows
$num = 0; // don't change

echo "<table class=\"tables\">\n";
// loop for the table rows
for ($rows = 0; $rows < $num_rows; $rows++) {
    echo "<tr class=\"trs\">\n";
    // this is the loop for the table columns
    for ($cols = 0; $cols < $num_cols; $cols++) {
        if ($num < $total_records) { // show records if available

             $id = $datarows[$num]['id'];
             $url = $datarows[$num]['url'];
             $inhalt = $datarows[$num]['inhalt'];
             echo "<td class=\"tds\"><strong>".$id."</strong><br />".$url."<br />".$inhalt."<td>\n";
        } else { // show an empty cell
            echo "<td>&nbsp;</td>\n";
        }
        $num++; // raise the number by one for the next record
    }
    echo "</tr>\n";
}
echo "</table>\n";
?>

</body>
</html>
 
Zuletzt bearbeitet:
Als ich das Ganze nur oberflächlich gelesen habe, dachte ich zunächst: Tabelle mit drei Spalten, ID, URL und Text, alles OK.
Dann habe ich jedoch gesehen, dass ID, URL und Text jeweils untereinander in einer Tabellenzelle stehen. Und da kommen mir Zweifel, ob eine Tabelle das Mittel der Wahl ist. Statt dessen empfehle ich ein Gridlayout. Das hat zusätzlich den Vorteil, dass es problemlos möglich ist, mit CSS die Anzahl der Spalten abhängig von der Breite des Browserfensters umzuschalten. Während Du bei einer Tabelle auf die drei Spalten fest gelegt bist.
Außerdem wird sowohl die Struktur des HTML als auch die Generierung viel einfacher.
Überlege, ob Du das als Alternative ausprobieren willst. Gridlayout ist ein wenig vielschichtig, jedoch für deinen Fall brauchst Du nur display: grid; und die grid-template-columns.
 
@Sempervivum Tja das hatte ich bereits probiert, jedoch erfolglos, ich habe keine horizontale Ausgabe erreichen können. Ich probier's nochmals, aber vllt. hast Du einen kleinen weiteren Tipp für den style/css.
Hier mein Beispiel das wunderbar funktioniert, aber eben nicht bei der php-Ausgabe wie oben beschrieben.

HTML:
<style>
.gridcontainer{
display: grid;
grid-template-columns: 33% 33% 33%;
}

.gridcontainer > div{
background-color: yellow;
text-align: center;
}
</style>
</head>
<body>

<br />
<div class="gridcontainer">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

</body>

MONI
 
Zuletzt bearbeitet:
Hier mein Beispiel das wunderbar funktioniert, aber eben nicht bei der php-Ausgabe wie oben beschrieben.
Das wundert mich nicht, denn das PHP oben erzeugt ja eine Tabelle und das passt nicht mit einem Gridlayout zusammen. Mit dem folgenden PHP erzeugst Du ein HTML ähnlich wie in deinem letzten Posting:
Code:
echo '<div class="gridcontainer">' . PHP_EOL;
// loop for the data rows
foreach ($datarows as $row) {
    echo '    <div class="griditem">' . PHP_EOL;
    echo '        <strong>' . $row['id'] . '</strong>' . PHP_EOL;
    echo '        <span>' . $row['url'] . '</span>' . PHP_EOL;
    echo '        <span>' . $row['inhalt'] . '</span>' . PHP_EOL;
    echo '    </div>' . PHP_EOL;
}
echo '</div>' . PHP_EOL;
Ist doch viel einfacher, nicht wahr? Innerhalb der Griditems kannst Du dann die Elemente mit Flexlayout untereinander anordnen.
In einem nächsten Schritt kannst Du dann den Umweg über das Array $datarows weg lassen und sofort aus der while-Schleife mit dem fetch_array das HTML generieren.
Beste Grüße - Ulrich
 
Zurück