Skip to main content

Posts

Showing posts from July, 2013

When Table Cells are Smaller than the Table

I ran into an issue at work the other day that was a bit strange. A portion of one of our forms is using tables for layout (Yeah, I know... it's older code), in all other browsers the fields lined up with the others on the page, but in IE9 there was some unexpected extra space throwing the layout all off. I took a look, and noticed a few things: The table had a fixed width of 690px There were only two columns in the entire table, but the second cell had colspan='2' Both table cells had a fixed width The sum of the table cells widths (including padding and all) was less than the width of the entire table So what does all of this mean? Well, the main issue is that, since the total width of the cells is less than that of the table, the browser has to figure out what to do with the leftover space. Let's see what happens (I'm leaving off the colspan and adding some extra elements for demonstration purposes). cell 1