Geek Answers Handbook

Make <div> fill <td> without scripts

Yes, this is another question about the good old div inside td , but without scripts.

td width is defined in pixels.

I want the div (and its internal input) to fill the whole td . I did this in Chrome, but failed in Firefox and IE9. There is a complete mess. (I don't care about IE6-8)

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

EDIT

Although I have not specified it before, I expect that the contents of some cells in the table will grow in height and expand some rows. In IE and FF height: 100% element will always have the initial height of the container specified in css: http://jsfiddle.net/K5D9z/51/ . All answers have this problem.

UPDATE

As noted in the comment, there seems to be no clean css solution. Therefore, I resorted to the installation height of the script in the style attribute for each td according to its calculated height: http://jsfiddle.net/K5D9z/54/ .

+4
source share
2 answers

You need to remove position:absolute from the .test-cell div, .test-cell input . This causes input removed from the normal content stream, so it won’t stay in td where it should. This, along with changing the 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

+1
source

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/

+1
source

More articles:


All Articles