display:table-cell not working on an input element
css
Solution
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
Problem
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...