css - display:table-cell not working on an input element

Question

I want to do a portion of a form look like a spreadsheet. There are several forms and <table> is thus not viable (though I'm not against it when you do are printing semantically tabular data, as it is the case).

So I tried to simply use a CSS2.1 layout directly with the form input elements, eg.

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

Full example in the fiddle.

But it looks like display:table-cell does not work on <input> elements!

If you check in Chrome "Computed Style" the display will be "inline-element".

But I did not find anywhere why it shouldn't:

• Mozilla Dev Network CSS:display
• W3C CSS 2.1 Recommendation Visual Formatting Model
• W3C Tables Recommendation

Any idea?

It sounded so much better than having some <div class="cell"> around the <input> and then having to play with box-model to get it look nice...

Answer 1

来自W3.org：

“CSS 2.1 没有定义哪些属性适用于表单控件和框架，或者如何使用 CSS 来设置它们的样式。用户代理可以将 CSS 属性应用于这些元素。建议作者将这种支持视为实验性的。未来级别的 CSS可以进一步说明这一点。”

对不起，但display: table-cell在input元素上被视为实验性的。尽量避免它，例如使用 wrapper-elements 进行定位。

我用div元素做了一个例子。您现在可以在一个表中拥有多个表单，但它仅在form元素跨越整行时才有效。否则你的嵌套会被破坏。

编辑：border-collapse使用添加以避免双边框 的版本更新了小提琴。

JSFiddle 示例