display: table-cell não está funcionando em um elemento de entrada

Eu quero fazer uma parte de um formulário parecido com uma planilha. Existem várias formas e<table> portanto, não é viável (embora eu não seja contra quando você está imprimindo dados semanticamente tabulares, como é o caso).

Então eu tentei simplesmente usar um layout CSS2.1 diretamente com os elementos de entrada do formulário, por exemplo.

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

Exemplo completo emo violino.

Mas parece quedisplay:table-cell não funciona em<input> elementos!

Se você fizer check-in no Chrome "Computed Style", a exibição será "inline-element".

Mas eu não encontrei nada porque não deveria:

Mozilla Dev Network CSS: exibirW3C CSS 2.1 Recomendação Visual Formatting ModelRecomendação das Tabelas do W3C

Qualquer ideia?

Soava muito melhor do que ter algum<div class="cell"> em volta do<input> e depois ter que jogar com o modelo de caixa para ficar bem ...

questionAnswers(1)

yourAnswerToTheQuestion