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

我想做一个表单的一部分看起来像电子表格。
有几种形式,< 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的完整例子。

但是它看起来像显示:table-cell在< input>上不起作用元素!

如果您检查Chrome“计算风格”,显示将为“内联元素”。

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

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

任何想法?

它听起来好像有一些< div class =“cell”>围绕< input>然后不得不玩盒子模型让它看起来不错…

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

对不起,但显示:table-cell对输入元素进行实验处理。尝试避免它,使用包装元素进行定位。

我用div元素做了一个例子。现在,您可以在表格中拥有多个表单,但是只有当表单元素跨越完整的行时才可以使用。否则你的嵌套将被破坏。

编辑:
更新了小提琴与添加边框崩溃的版本,以避免双边界。

JSFiddle example

http://stackoverflow.com/questions/15625878/displaytable-cell-not-working-on-an-input-element

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:css – display:table-cell不能在输入元素上工作