4

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

rgripper
  • 1,066
  • 15
  • 23
  • 2
    Dropping the `input`'s positioning stuff (`position`, `top`, etc.), and giving it a height of `100%` and a width of `auto`, seems to work for me on Firefox 17.0.1. (I haven't checked other browsers.) – ruakh Dec 25 '12 at 21:09
  • 1
    You cannot make the child element fill 100% of the parent's height unfortunately. – David Nguyen Dec 27 '12 at 08:16
  • Take a look at this: http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh – David Nguyen Dec 29 '12 at 01:07
  • I've seen this, but that answer is about making it only _look_ like all the columns are 100% height. But when it comes to the actual borders of the content containers they are still only as tall as their content. So it doesn't help the `input` tag fill its container entirely. – rgripper Jan 04 '13 at 09:06

2 Answers2

1

How about something like this:

CSS:

table
{
    border-collapse:collapse;
}

td
{
    padding:0;
    border: 1px Solid gray;
    height: 120px;
    width: 100px;
}

.test-row 
{
    background-color: red;
}

.test-cell div, .test-cell input
{
    height:100%;
    width:auto;
    background-color: green;
}

​ DEMO: http://jsfiddle.net/K5D9z/47/

Dom
  • 38,906
  • 12
  • 52
  • 81
  • There is a problem in FF and IE9-10 again if the content's height in the first column is bigger than the td's height. The whole row grows but div sticks to the original height defined in css. – rgripper Dec 26 '12 at 07:24
  • Sorry about that, made a change to my initial post. – Dom Dec 27 '12 at 01:46
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

Community
  • 1
  • 1
Cody Guldner
  • 2,888
  • 1
  • 25
  • 36