display:table-cell not working on an input element

Solution 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