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>

the fiddle 中的完整示例。

但看起来 display:table-cell不适用于<input>元素！

如果您在Chrome中选中“Computed Style”，则显示屏将为“inline-element”。

但我没有找到为什么不应该这样做：

有什么想法吗？

听起来好于在<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 example

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

1 个答案: