display:table-cell not working on an input element

Question

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

Answer 1

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