Filling a Table Cell

Question: Hey man, I accidently found your website and I am amazed of how much information you have on it, great job. Now this is my question: Is there any way to make a square or rectangular image fit the whole area of a cell (<td>) without leaving that thin (normally of 2px) space at the bottom of the cell? I tried using the image as a background of that cell and it works, but I have problems when I want that image to link somewhere else.

Answer: The first thing you need to do is to ensure that the column or row of your table that contains these images has padding set to zero. You would do this in the stylesheet using padding:0 on a class and attaching that class to either the row or column that contains the images (for example if the class is 'imgtab' then you'd have either <tr class="imgtab"> or <col class="imgtab"> in your table).

That gets rid of any padding in the row or column. The other thing you need to do is to make sure that any whitespace around the image tag gets ignored by making it a block. Your CSS would end up looking like this:

.imgtab {padding:0;}
.imgtab img {display:block}


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow