Sven Riwoldt
162 lines
3.2 KiB
Markdown
162 lines
3.2 KiB
Markdown
# PHP & CSS – Tabellen und Formulare
|
||
|
||
## 1. Input-Feld mit vorausgefülltem Wert
|
||
|
||
**Problem:** `$value=` ist kein gültiges HTML-Attribut.
|
||
|
||
**Lösung:**
|
||
```html
|
||
<input name="ls" value="<?= htmlspecialchars($row['ls']) ?>">
|
||
```
|
||
|
||
Doppelte Anführungszeichen außen verwenden, damit die einfachen Anführungszeichen im PHP-Array (`$row['ls']`) nicht kollidieren.
|
||
|
||
Weiterer Fehler im Original: doppeltes `</td></td>` und fehlendes schließendes `</td>`.
|
||
|
||
**Korrekter Block:**
|
||
```html
|
||
<form method="post">
|
||
<table>
|
||
<tr>
|
||
<th>Ticket-Nr.</th>
|
||
<td><?= htmlspecialchars($row['tt']) ?></td>
|
||
</tr>
|
||
<tr>
|
||
<th>Auftraggeber</th>
|
||
<td><input name="ls" value="<?= htmlspecialchars($row['ls']) ?>"></td>
|
||
<th>Bearbeiter</th>
|
||
<td><?= htmlspecialchars($row['bearbeiter']) ?></td>
|
||
</tr>
|
||
</table>
|
||
</form>
|
||
```
|
||
|
||
---
|
||
|
||
## 2. Spaltenbreite in Tabellen
|
||
|
||
### Option 1 – Inline Style
|
||
```html
|
||
<th style="width: 150px;">Auftraggeber</th>
|
||
```
|
||
|
||
### Option 2 – CSS-Klasse
|
||
```css
|
||
table th { width: 150px; }
|
||
table th:first-child { width: 100px; }
|
||
```
|
||
|
||
### Option 3 – `<col>`-Element (zentral für jede Spalte)
|
||
```html
|
||
<table>
|
||
<colgroup>
|
||
<col style="width: 150px;">
|
||
<col style="width: 250px;">
|
||
<col style="width: 150px;">
|
||
<col style="width: 250px;">
|
||
</colgroup>
|
||
...
|
||
</table>
|
||
```
|
||
|
||
> **Wichtig:** `table-layout: fixed` ist erforderlich, damit die Breiten zuverlässig greifen.
|
||
|
||
```css
|
||
table {
|
||
table-layout: fixed;
|
||
width: 100%;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 3. Spaltenbreiten zentral für mehrere Tabellen
|
||
|
||
Jeder Tabelle eine eigene Klasse geben:
|
||
|
||
```html
|
||
<table class="tabelle-ticket">
|
||
<table class="tabelle-adressen">
|
||
```
|
||
|
||
CSS in einer zentralen `.css`-Datei:
|
||
|
||
```css
|
||
table {
|
||
table-layout: fixed;
|
||
width: 100%;
|
||
}
|
||
|
||
.tabelle-ticket col:nth-child(1) { width: 150px; }
|
||
.tabelle-ticket col:nth-child(2) { width: 250px; }
|
||
.tabelle-ticket col:nth-child(3) { width: 150px; }
|
||
.tabelle-ticket col:nth-child(4) { width: 250px; }
|
||
|
||
.tabelle-adressen col:nth-child(1) { width: 100px; }
|
||
.tabelle-adressen col:nth-child(2) { width: 300px; }
|
||
```
|
||
|
||
Einbinden per:
|
||
```html
|
||
<link rel="stylesheet" href="style.css">
|
||
```
|
||
|
||
---
|
||
|
||
## 4. Tabelle ignoriert Spaltenbreiten (Auto-Breite)
|
||
|
||
**Ursache:** Fehlendes `table-layout: fixed`.
|
||
|
||
```css
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed; /* ← das fehlte */
|
||
}
|
||
```
|
||
|
||
Außerdem: `max-width: auto` ist ungültig. Entweder weglassen oder konkreten Wert setzen:
|
||
```css
|
||
.content {
|
||
max-width: 1200px; /* oder weglassen */
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Input-Breite sprengt Tabellenlayout
|
||
|
||
**Ursache:** `input { width: 100%; }` greift auch auf Inputs in Tabellenzellen.
|
||
|
||
**Lösung:** Inputs in Tabellen explizit ausschließen:
|
||
|
||
```css
|
||
/* Inputs nur im Formular-Bereich */
|
||
.form-bereich input,
|
||
.form-bereich select {
|
||
width: 100%;
|
||
padding: 8px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* Inputs in Tabellen zurücksetzen */
|
||
td input, td select {
|
||
width: auto;
|
||
padding: 2px 4px;
|
||
margin-top: 0;
|
||
}
|
||
```
|
||
|
||
Oder Formular-Bereich per Klasse kapseln:
|
||
|
||
```html
|
||
<div class="form-bereich">
|
||
<label>...</label>
|
||
<input ...>
|
||
</div>
|
||
|
||
<table>
|
||
... <!-- inputs hier bleiben unberührt -->
|
||
</table>
|
||
```
|