Force fit an HTML Table

My previous post had a table that the browser pushed outside the defined dimensions, making half of it un-viewable. Beside the rather narrow body for the blog, which by-the-way makes it easier to read, most browsers just don't know how to break text strings that do not have white space.

Turns out there is some CSS code that can be used that will correct this in most browsers. Use the following two CSS properties in your table definition (adjust width to meet your need).

table-layout: fixed; width: 425px;

Surprisingly, if you use Firefox, it shortens the width correctly but it still has trouble wrapping some lines, while IE and Safari seems to render the entire table correctly. Visit the W3C site to get details on other table options.