css - 显示 :table-cell not working on an input element

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 中选中“计算样式”，显示将是“内联元素”。

但我没有找到它不应该的任何地方:

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

有什么想法吗？

听起来比有一些 <div class="cell"> 好多了<input>周围然后不得不玩盒子模型让它看起来不错......

Answer 1

来自 W3.org :

"CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further."

抱歉，但是 input 元素上的 display: table-cell 是实验性的。尽量避免它，例如使用包装元素进行定位。

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

编辑: 使用添加了 border-collapse 以避免双边框的版本更新了 fiddle 。

JSFiddle example