Question

Yes, this is one more question about good old div inside td but without scripts.

td‘s width is defined in pixels.

I want a div (and its inner input) fill the whole td. I made it work in Chrome, but failed in Firefox and IE9. It’s a total mess there. (I don’t care about IE6-8)

Here is the snippet I’m testing on: http://jsfiddle.net/K5D9z/37/.
Is there a generic solution to this?

EDIT

Though I didn’t specify previously, I expect the content of some table cells to grow in height and expand some rows. In IE and FF height: 100% means element will always have the container’s initial height specified in css: http://jsfiddle.net/K5D9z/51/. All of the answers have this issue.

UPDATE

As has been noted in a comment there seems to be no pure css solution. So I resorted to the script setting height in a style attribute for every td according to its calculated height: http://jsfiddle.net/K5D9z/54/.

Answer 1

You need to remove position:absolute from .test-cell div, .test-cell input. This is causing the input to be removed from the normal flow of content, so it won’t remain in the td where it is supposed to. This, along with changing height and width from auto to 100% should give you the solution you are looking for.

.test-cell div, .test-cell input{
  display: block;
  /* position: absolute; Don't use this style */
  height:100%;
  width: 100%;
  /* Don't need these, because it goes along with position absolute
     top:0;
     left:0;
     bottom:0;
     right:0;
  */
  background-color: green;
}

Fiddle