Spalten einer Tabelle dynamisch ändern

Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können. Wie das geht wird hier an einem Beispiel demonstriert, die Daten der Tabelle kommen hierbei aus einer MySQL-Datenbank.

Demo

Die Spalten der Tabelle haben immer die gleiche Breite, außer ein Wort ist breiter als eine Spalte dann wird die Spalte entsprechend verbreitert.

Wie immer an dieser Stelle folgt der Quelltext:

QuelltextAusblendenKopierenZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Dynamische Spalten in einer Tabelle</title>

  <style>
  body, table {
   font-family: Verdana, Arial, Sans-Serif;
   font-size: 0.85rem;
  }

  td {
   vertical-align: top;
  }

  td:nth-child(even) {
   background-color: rgba(255, 215, 0, 0.7);
  }

  td:nth-child(odd) {
   background-color: rgba(224,224,0, 0.7);
  }
  </style>


 </head>
<body>

<?php
// Verbindung zur Datenbank
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8mb4''root''');

// Datensätze auslesen
$select $db->query("SELECT `name`, `text` FROM `tabelle`");
$datensaetze $select->fetchAll(PDO::FETCH_OBJ);
$anzahlDatensaetze count($datensaetze);

// Anzahl der Spalten
$maxSpalten 8;
$spalten = isset($_POST["spalten"]) ? $_POST["spalten"] : 1// 1 = Vorauswahl
$spalten $spalten > $maxSpalten || $spalten < $spalten;

// Breite der Spalten
$spaltenBreite floor(100 $spalten);

// Formular
echo '<form method="post">
<p><label>Spalten: ' $spalten 
 <select name="spalten" size="1" onChange="this.form.submit()">
  <option></option>';

for (
$i 1$i <$maxSpalten$i++) {
 echo 
'<option>$i '</option>';
}

echo 
</select>
 </label></p>
</form>

<table border><tr>
';

// Ausgabe der Datensätze
foreach ($datensaetze as $nr => $datensatz) {
 echo 
'<td style="width:' $spaltenBreite '%">.
  
'<b>$datensatz->name ':</b><br>$datensatz->text '</td>';

 
// Berechnen wann eine neue Tabellenzeile beginnt
 
if (in_array($nrrange($spalten 1$anzahlDatensaetze$spalten))) 
  echo 
'</tr><tr>';
}

echo 
'</tr></table>';
?>

</body>
</html>

Tipps

Favicon erstellen - Ihr Logo in den Lesezeichen (Favoriten)
Das Favoriten Icon wird bei einem Bookmark in die Favoritenliste aufgenommen. Dort erscheint zukünftig die „gebookmarkte” Webseite mit einem eigenen Symbol.
Mit dem PHPMailer E-Mails sicher versenden
Damit E-Mails sicher beim Empfänger ankommen und nicht irgendwo anders landen (Spamordner) oder sogar vom Provider abgelehnt werden nutzt man am besten eine fertige Mailer-Klasse wie den „PHPMailer”.
Formulardaten über AJAX überprüfen und speichern
Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert.