display：table-cell不处理输入元素 [英] display:table-cell not working on an input element

问题描述

我想做一个表单的一部分看起来像一个电子表格。
有几种形式，因此< table> 是不可行的（虽然我不打算在打印语义表式数据时，

所以我试图直接使用CSS2.1布局直接与表单输入元素，例如

 < div class =table> 
< form class =tbody> 
< div class =tr> 
< label class =td>标签< / label> 
< input class =tdname /> 
< input class =tdname /> 
< / div> 
< / form> 
< / div> 
  

但它看起来像 display：table-cell code>在< input> 元素上无效！

在Chrome的计算风格显示将是inline-element。

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

• Mozilla Dev Network CSS：display


• W3C CSS 2.1建议视觉格式模型


• W3C表格建议

有什么想法吗？

< input> 周围的< div class =cell> 模型让它看起来不错...

解决方案

从 W3.org ：

CSS 2.1未定义哪些属性适用于表单控件和框架，或者如何使用CSS来设置样式。用户代理可以对这些元素应用CSS属性。建议作者将此类支持视为实验性支持。

很抱歉， display：table-cell 在输入元素被处理为实验。尝试避免它，使用包装元素的定位例如。

我用 div 元素做了一个例子，现在你可以在一个表中有多个表单，但只有当

编辑：
更新了

添加 border-collapse 以避免双边框。

JSFiddle示例

I want to do a portion of a form look like a spreadsheet. There are several forms and <table> is thus not viable (though I'm not against it when you do are printing semantically tabular data, as it is the case).

So I tried to simply use a CSS2.1 layout directly with the form input elements, eg.

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

Full example in the fiddle.

But it looks like display:table-cell does not work on <input> elements!

If you check in Chrome "Computed Style" the display will be "inline-element".

But I did not find anywhere why it shouldn't:

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

Any idea?

It sounded so much better than having some <div class="cell"> around the <input> and then having to play with box-model to get it look nice...

解决方案

From 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."

Sorry, but display: table-cell on input elements is treated experimental. Try to avoid it, use wrapper-elements for the positioning for example.

I've made an example with div elements. You can now have multiple forms within a table, however it only works when the form element spans full rows. Otherwise your nesting will be broken.

EDIT: Updated the fiddle with a version where border-collapse is added to avoid double borders.

JSFiddle example

这篇关于display：table-cell不处理输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！