display:table-cell不在输入元素上工作

Question

我想将表单的一部分看起来像电子表格.有几种形式,<table>因此不可行(虽然我在打印语义表格数据时并不反对它,因为情况就是这样).

所以我试着直接使用CSS2.1布局和表单输入元素,例如.

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

小提琴中的完整例子.

但看起来它对元素display:table-cell不起作用<input>!

如果您在Chrome"Computed Style"中签入,则显示将为"inline-element".

但我没有找到任何地方为什么不应该:

• Mozilla Dev Network CSS:显示
• W3C CSS 2.1推荐视觉格式模型
• W3C表建议书

任何的想法？

这听起来所以比有一些更好的<div class="cell">周围<input>,然后具有盒模型玩得到它好看...

Answer 1

来自W3.org:

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

很抱歉,但display: table-cell对input元素进行处理试验.尽量避免它,例如使用wrapper-elements进行定位.

我用div元素做了一个例子.您现在可以在表中包含多个表单,但只有在form元素跨越完整行时才有效.否则你的嵌套将被打破.

编辑: 更新了小提琴的版本border-collapse添加,以避免双边框.

JSFiddle示例