display: komórka tabeli nie działa na elemencie wejściowym

Chcę, aby część formularza wyglądała jak arkusz kalkulacyjny. Istnieje kilka form i<table> nie jest więc opłacalny (chociaż nie jestem przeciwny temu, kiedy robisz drukowanie semantycznie danych tabelarycznych, jak to ma miejsce).

Próbowałem więc po prostu użyć układu CSS2.1 bezpośrednio z elementami wprowadzania formularza, np.

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

Pełny przykład wskrzypce.

Ale wygląda na todisplay:table-cell nie działa na<input> elementy!

Jeśli zaznaczysz w Chrome „Computed Style”, wyświetlacz będzie „inline-element”.

Ale nie znalazłem nigdzie, dlaczego nie powinien:

CSS Mozilla Dev Network: wyświetlanieW3C CSS 2.1 Rekomendacja wizualnego modelu formatowaniaZalecenie tabel W3C

Dowolny pomysł?

Brzmiało to o wiele lepiej niż ich posiadanie<div class="cell"> wokół<input> a potem trzeba grać z modelem pudełkowym, żeby wyglądał ładnie ...

questionAnswers(1)

yourAnswerToTheQuestion