Anzeige: Tabellenzelle arbeitet nicht an einem Eingabeelement

Ich möchte, dass ein Teil eines Formulars wie eine Kalkulationstabelle aussieht. Es gibt verschiedene Formen und<table> ist daher nicht realisierbar (obwohl ich nicht dagegen bin, wenn Sie semantisch tabellarische Daten drucken, wie es der Fall ist).

Deshalb habe ich versucht, ein CSS2.1-Layout einfach direkt mit den Formulareingabeelementen zu verwenden, z.

<div class="table">
    <form class="tbody">
        <div class="tr">
            <label class="td">Label</label>
            <input class="td" name />
            <input class="td" name />
        </div>
    </form>
</div>

Vollständiges Beispiel indie Geige.

Aber es sieht so ausdisplay:table-cell funktioniert nicht<input> Elemente!

Wenn Sie in Chrome "Computed Style" aktivieren, wird "Inline-Element" angezeigt.

Aber ich habe nirgendwo gefunden, warum es nicht sollte:

Mozilla Dev Network CSS: AnzeigeW3C CSS 2.1 Empfehlung Visuelles FormatierungsmodellEmpfehlung für W3C-Tabellen

Irgendeine Idee?

Es klang so viel besser als einige zu haben<div class="cell"> um die<input> und dann mit dem Box-Modell spielen müssen, damit es schön aussieht ...

Antworten auf die Frage(1)

Ihre Antwort auf die Frage