Table row cells not filling up entire table height when using percentage height

Question

I have a table which changes its size depending on the height of the browser. The cells inside the rows of the table have a percentage height, so that they automatically resize when the table does.

However, for some height values, the cells don't fully occupy the space of the table, there's a gap of a few pixels:

enter image description here

My prediction of as to why this is happening is because it can't evenly divide the height value amongst the rows, and therefore rounds the fractional result down to stop the cells from overflowing out of the table.

My solution was to calculate the remainder, round it up, and apply it to the cells on the bottom row, using JavaScript. This would mean that one row is slightly higher than the others, but for my purposes that doesn't matter.

So in the function I have that resizes the table when the window changes height, I added the following code, hoping it would solve the problem:

var divisionResult = tableHeight/rowsNeeded;

var roundedDivision = Math.round(divisionResult);
var remainderPercentage = Math.ceil(100 - divisionResult); 

if (divisionResult % 1 !== 0) {
    //not an integer        

    if (rowsNeeded == 4) {
        //setting it only on the first cell applies to the entire row

        $("table tr:nth-last-child(2)").children().first().css("height", remainderPercentage+"%");
    } else if (rowsNeeded == 5) {
        $("table tr:last-child").children().first().css("height", remainderPercentage+"%");
    }
}

It's also worth noting that this function is manually invoked when the page loads, as well as inside the resize function, $(window).resize()

When I tested it, it initally worked with a small height (< 600px), but for values larger than that, it still adds the 2-3 pixel gap at the bottom of the table.

I have an invisible row at the bottom of the table which hides itself (using jQuery's hide() function) when not needed for some tasks, could that be affecting it?

Has anyone else encountered this situation, and if so, what way did you use to overcome it? I'm completely out of ideas.

If it's of any help, I'm using Chrome 28, and the problem doesn't seem apparent on Firefox 22, but is apparent on Safari 6 (which makes me think it's a WebKit issue)

Thanks.

Just to exclude a possibility from theorizing: Does the table have cellspacing=0 ? — Zmart, Jul 24 '13 at 14:01
What happens if you put cellspacing=0 in the table paramaters? — Zmart, Jul 24 '13 at 14:05
Are the black boxes images? http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image. Without the markup being used (or a demo), we can sit here guessing all day. — cimmanon, Jul 24 '13 at 14:25
No, they're not images, just regular cells. The markup is dynamically generated by JavaScript, and it is constantly changing. But it is no different to any regular table generated. — Jack Greenhill, Jul 24 '13 at 14:31

Table row cells not filling up entire table height when using percentage height

0 Answers0