display:table-cell not working on an input element

by

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

More Related Contents:

  1. CSS positioning things differently between browsers [closed]
  2. Complex CSS selector for parent of active child [duplicate]
  3. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  4. How do I conditionally apply CSS styles in AngularJS?
  5. Why did Bootstrap 3 switch to box-sizing: border-box?
  6. Centering brand logo in Bootstrap Navbar
  7. CSS: fixed position on x-axis but not y?
  8. How to create equal height columns in pure CSS [duplicate]
  9. how to properly display an iFrame in mobile safari
  10. draw diagonal lines in div background with CSS
  11. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  12. What does an “&” before a pseudo element in CSS mean?
  13. Removing display:flex adds spaces around a link. Why?
  14. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  15. Proper SCSS Asset Structure in Rails
  16. Circle with two borders
  17. CSS: Are view height (vh) and view width (vw) units widely supported?
  18. IE7, IE8 support for css3 media query [duplicate]
  19. Rails 4: how do I use Sass Mappings?
  20. Create a variable in .CSS file for use within that .CSS file [duplicate]
  21. Box Shadow on table row not appearing on certain browsers
  22. How to transition CSS display + opacity properties
  23. CSS3 Transform affecting other elements with chrome/safari
  24. Can flex items wrap in a container with dynamic height?
  25. -webkit-filter: drop-shadow for other browsers
  26. Twitter Bootstrap: div in container with 100% height
  27. How does hexadecimal color work?
  28. CSS overlapping elements & opacity issue
  29. @media media query and ASP.NET MVC razor syntax clash
  30. Bootstrap table striped: How do I change the stripe background colour?

Leave a Comment