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的“计算机样式”，则显示内容为“内联元素”。

任何的想法？

这听起来比在<div class="cell">周围放一些更好<input>，然后不得不玩盒子模型来使它看起来更好…

Answer 1

从W3.org：

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

抱歉，但是display: table-cell对input元素进行实验性处理。尽量避免这种情况，例如使用wrapper-elements进行定位。

我用div元素做了一个例子。现在，一个表中可以有多个表单，但是仅在form元素跨满行时才起作用。否则，您的嵌套将被破坏。

编辑： 更新了小提琴与版本，其中border-collapse添加以避免双边框。