PHP & CSS – Tabellen und Formulare

1. Input-Feld mit vorausgefülltem Wert

Problem: $value= ist kein gültiges HTML-Attribut.

Lösung:

<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:

<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

<th style="width: 150px;">Auftraggeber</th>

Option 2 – CSS-Klasse

table th { width: 150px; }
table th:first-child { width: 100px; }

Option 3 – `<col>`-Element (zentral für jede Spalte)

<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.

table {
    table-layout: fixed;
    width: 100%;
}

3. Spaltenbreiten zentral für mehrere Tabellen

Jeder Tabelle eine eigene Klasse geben:

<table class="tabelle-ticket">
<table class="tabelle-adressen">

CSS in einer zentralen .css-Datei:

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:

<link rel="stylesheet" href="style.css">

4. Tabelle ignoriert Spaltenbreiten (Auto-Breite)

Ursache: Fehlendes table-layout: fixed.

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:

.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:

/* 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:

<div class="form-bereich">
    <label>...</label>
    <input ...>
</div>

<table>
    ...  <!-- inputs hier bleiben unberührt -->
</table>

3.2 KiB Raw Blame History Unescape Escape