I was working on an HTML issue earlier today. One of our pages had a table with set column widths. Some of the cells contained other another table in order to align some information. That all seemed simple enough, however, when a bug was reported to us where Internet Explorer was sort of doing some strange things with those nested tables.
For example, I’d set a columb to be 200 pixels wide and the table within to be 196 pixels wide. The inside table was the right width, but the column stretched out to 240 pixels or so. As a result, the layout became messed up. I tried all of the usual suspects in terms of solving this sort of thing: margin, padding, setting column widths, etc etc. None of them really solved the issue in IE. After two hours of fiddling around, I was pissed off. I mean, I was telling the column to be a certain width: why the hell wouldn’t IE behave?
Well, after all that I figured I’d give W3Schools a look. Seriously, all web devs need to have that site bookmarked. It’s a handy reference, for sure. On the CSS 2.0 reference page, under Tables, I spotted the table-layout property. I thought I’d give it a go. In the opening table tag, I set the style: “table-layout:fixed“. Well what do you know? The table columns behaved and were exactly as wide as I wanted them. Whoo! I’d beaten that freakin’ table into submission!
Well, all right. Even after all this time I’m still learning new things to add to be bag of tricks. That kind of makes me happy.




Recent Comments